diff --git a/README.md b/README.md index 0d75d666..ebea25f8 100644 --- a/README.md +++ b/README.md @@ -72,11 +72,11 @@ If you want to use the app with your own server and want web push notification t ### Desktop screenshot

- Desktop web: full app + Desktop web: full app

### Mobile screenshots

- Mobile web: contacts Mobile web: chat Mobile web: topic info Mobile web: start new chat Mobile web: account settings + Mobile web: contacts Mobile web: chat Mobile web: topic info Mobile web: start new chat Mobile web: account settings

diff --git a/css/base.css b/css/base.css index 00d9edf1..4db50544 100644 --- a/css/base.css +++ b/css/base.css @@ -32,8 +32,11 @@ a:focus { text-decoration: underline; } -a.red:hover, -a.red:focus { +a.danger { + color: #D32F2F; +} +a.danger:hover, +a.danger:focus { color: #F44336; } @@ -60,14 +63,16 @@ a.gray:focus { text-decoration: none; } -.flat-button .faux { - height: 1.5em; - line-height: 1.5em; +.flat-button.faux { + display: inline-block; + height: 1.4em; + line-height: 1.4em; text-transform: none; - padding-left: .5rem; - padding-right: .5rem; - border: 1px solid gray; + padding-left: .35rem; + padding-right: .35rem; + border: 1px solid #999; border-radius: 3px; + background-color: #eee; } form { @@ -110,7 +115,7 @@ button { padding-left: 1.2rem; padding-right: 1.2rem; border-radius: 4px; - box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25); + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25); text-transform: uppercase; min-width: 5rem; margin: 0 0.35rem 0 0.35rem; @@ -141,7 +146,6 @@ button.round.small { line-height: 2rem; box-shadow: 0 2px 0.35rem 0 rgba(0, 0, 0, 0.25); } - button:focus, button:hover, button:active { color: #fff; } @@ -152,27 +156,19 @@ button:active.round.small { box-shadow: inset 0 2px 0.35rem rgba(0, 0, 0, 0.125); } -button.blue { +button.primary { background-color: #1e88e5; /* blue 600 */ color: white; } -button.blue:focus, button.blue:hover, button.blue:active { - background-color: #1976d2; -} - -button.blue { - background-color: #1e88e5; /* blue 600 */ - color: white; -} -button.blue:focus, button.blue:hover, button.blue:active { +button.primary:focus, button.primary:hover, button.primary:active { background-color: #2962ff; } -button.white { +button.secondary { background-color: #FFF; color: #2196f3; /* blue 500 */ } -button.white:focus, button.white:hover, button.blue:active { +button.secondary:focus, button.secondary:hover, button.secondary:active { background-color: #e3f2fd; } @@ -258,16 +254,16 @@ textarea { /* Chrome & other webkit browsers */ ::-webkit-scrollbar { - width: 0.6rem; + width: 0.6rem; } ::-webkit-scrollbar-track { - -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); - background-color: rgba(255,255,255,0.1); + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); + background-color: rgba(255,255,255,0.1); } ::-webkit-scrollbar-thumb { - background-color: rgba(0,0,0,0.3); + background-color: rgba(0,0,0,0.3); } /* Firefox only */ @@ -331,11 +327,9 @@ li:hover .menuTrigger a { } li.left:hover .menuTrigger { - -text-shadow: #c5e1a5 0 0 15px, #c5e1a5 0 0 5px; background-image: radial-gradient(#c5e1a5 40%, transparent 75%); } li.right:hover .menuTrigger { - -text-shadow: #fafafa 0 0 15px, #fafafa 0 0 5px; background-image: radial-gradient(#fafafa 40%, transparent 75%); } @@ -343,13 +337,12 @@ li.right:hover .menuTrigger { /* Begin Alert: modal window with message and buttons. */ div.alert-container { + position: absolute; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; - position: absolute; - -x-backdrop-filter: blur(4px); background: rgba(0,0,0,0.33); z-index: 3; } @@ -491,8 +484,8 @@ div.alert .content { #topic-view { position: relative; - overflow-x: hidden; display: flex; + overflow-x: hidden; flex-direction: column; width: 100%; height: 100%; @@ -551,7 +544,7 @@ div.alert .content { margin-left: 1rem; } -/* Extra spece on the right */ +/* Extra space on the right */ .space-right { margin-right: 0.25rem; } @@ -837,8 +830,8 @@ i.search { } .contact-box > li { - display: flex; position: relative; + display: flex; padding: 0.35rem 0.25rem 0.5rem 0.35rem; min-height: 3.75rem; flex-grow: 0; @@ -879,10 +872,18 @@ i.search { font-weight: lighter; } +.contact-box .contact-comment b { + font-weight: bolder; +} + +.contact-box .contact-comment .material-icons { + margin-bottom: .2rem; +} + /* Avatar and online-offline indicator */ .contact-box .avatar-box { - margin-right: 0.35rem; position: relative; + margin-right: 0.35rem; width: 3rem; min-width: 3rem; height: 3rem; @@ -926,14 +927,13 @@ i.search { /* Online-offline indicator positioned inside avatar-box */ .avatar-box .online, .offline { - display: inline-block; + position: absolute; width: 0.75rem; min-width: 0.75rem; height: 0.75rem; min-height: 0.75rem; flex-shrink: 0; border-radius: 50%; - position: absolute; right: 0; bottom: 0.1rem; } @@ -958,7 +958,6 @@ i.search { } .contact-box .checkmark.material-icons { - display: inline-block; width: 1.5rem; height: 1.5rem; font-size: 1.5rem; @@ -1018,8 +1017,8 @@ i.search { /* Styling of avatar upload control */ .avatar-upload { - display: flex; position: relative; + display: flex; flex-direction: column; flex-shrink: 0; width: 7rem; @@ -1115,7 +1114,7 @@ i.search { } .avatar-upload .inputfile:focus + label.round { - outline: none; + outline: none; } .avatar-upload .inputfile:focus + label, @@ -1413,12 +1412,12 @@ i.search { } .chat-box .bubble { - display: flex; position: relative; - max-width: 40rem; + display: flex; + max-width: 40rem; min-width: 9rem; - height: auto; - padding: 0.75rem 0.5rem 0.75rem 1.25rem; + height: auto; + padding: 0.75rem 0.5rem 0.75rem 0.5rem; margin: 0; text-align: left; border-radius: 0.5rem; @@ -1447,10 +1446,12 @@ i.search { .chat-box .left .bubble { background-color: #c5e1a5; + margin-right: 0.5rem; } .chat-box .right .bubble { background-color: #fafafa; + margin-left: 1.75rem; } .chat-box .center .bubble { @@ -1505,12 +1506,21 @@ i.search { margin-right: 0.8rem; } +/* Message text + timestamp and delivery marker */ +.chat-box .bubble div.content-meta { + width: 100%; +} + .chat-box .bubble div.message-content { + position: relative; color: #212121; margin: 0; + width: 100%; max-width: 36rem; overflow-wrap: break-word; + padding: 0 0.75rem 0 0.75rem; } + /* The timestamp is a floating element. Need to ensure div.message-content is expanded * to accomodate it. It's usually called clearfix. */ .chat-box .bubble div.message-content:after { @@ -1521,29 +1531,21 @@ i.search { visibility: hidden; } -.chat-box .timestamp { +.chat-box .timestamp-padding { display: inline-block; + width: 4rem; + height: 0; +} + +.chat-box .timestamp { position: relative; font-size: 80%; color: #777; - padding-left: 1rem; - top: 0.5rem; + top: 0.35rem; float: right; white-space: nowrap; } -/* Typing notification bubble */ -.chat-box .typing { - display: inline-block; - border-radius: 0.5rem; - width: 2rem; - padding: 0.25rem 0.35rem; - vertical-align: middle; - text-align: center; - color: #aaa; - margin-top: 0.75rem; -} - /* The name of the person who sent the message * (group chat only) */ @@ -1557,7 +1559,6 @@ i.search { position: relative; overflow: hidden; border-radius: 0.1rem; - display: block; } .inline-image { @@ -1577,11 +1578,11 @@ i.search { /* Broken image graphics which replaces the stock graphics. */ img.inline-image::before, img.image-preview::before { + position: absolute; + display: flex; font-size: 0.9rem; font-weight: lighter; color: #666; - display:flex; - position: absolute; top: 0; left: 0; width: 100%; @@ -1672,7 +1673,6 @@ ul.tabbar > li > a { padding-top: 0.75rem; padding-left: 1rem; padding-right: 1rem; - display: block; text-align: center; line-height: 2rem; font-weight: 400; @@ -1689,11 +1689,10 @@ ul.tabbar li.active > a { } ul.tabbar li.active > a:after { - height:0.15rem; - display:block; - content:""; - bottom:0; - left:0; + height: 0.15rem; + content: ""; + bottom: 0; + left: 0; position: absolute; background: #2196f3; animation: tabbar-border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0s alternate forwards; @@ -1701,12 +1700,12 @@ ul.tabbar li.active > a:after { @keyframes tabbar-border-expand { 0% { - opacity:0; - width:0; + opacity: 0; + width: 0; } 100% { - opacity:1; - width:100%; + opacity: 1; + width: 100%; } } /* END Tabs */ @@ -1788,10 +1787,10 @@ ul.tabbar li.active > a:after { /* Div with letter tile content */ .lettertile > div { + position: absolute; display: flex; flex-shrink: 0; flex-grow: 0; - position: absolute; top: 0; bottom: 0; left: 0; right: 0; text-transform: uppercase; align-items: center; diff --git a/css/base.min.css b/css/base.min.css index 40fc22e1..e588e5d8 100644 --- a/css/base.min.css +++ b/css/base.min.css @@ -1 +1 @@ -*{box-sizing:border-box;font-family:Roboto,Arial,sans-serif;margin:0;padding:0;text-rendering:optimizeLegibility}body,html{background-color:silver;box-shadow:inset 0 10rem #3949ab;color:#666;font-size:10pt;height:100%;overflow:hidden;width:100%}tt{font-family:Roboto Mono,Courier,monospace}a{color:#2196f3;text-decoration:none}a:focus,a:hover{color:#0a6ebd;text-decoration:underline}a.red:focus,a.red:hover{color:#f44336}a.gray:focus,a.gray:hover{color:#999}.flat-button{align-items:center;display:flex;font-weight:400;height:2em;line-height:2em;margin:.15rem .35rem;text-align:center;text-transform:uppercase;touch-action:manipulation;vertical-align:middle;white-space:nowrap}.flat-button:focus,.flat-button:hover{text-decoration:none}.flat-button .faux{border:1px solid grey;border-radius:3px;height:1.5em;line-height:1.5em;padding-left:.5rem;padding-right:.5rem;text-transform:none}form{line-height:1.5;padding:.5rem .75rem}form,label{font-size:1.1rem}label{margin-right:auto}label.small{color:#1e88e5;font-size:.95rem}img.avatar{border-radius:50%;height:100%;width:100%}button{border:1px solid transparent;border-radius:4px;box-shadow:0 2px 3px 0 rgba(0,0,0,.25);cursor:pointer;display:inline-block;font-family:inherit;font-size:1.05rem;font-weight:400;height:2.2rem;line-height:2.2rem;margin:0 .35rem;min-width:5rem;padding-left:1.2rem;padding-right:1.2rem;text-align:center;text-transform:uppercase;touch-action:manipulation;vertical-align:middle;white-space:nowrap}button[disabled],html input[disabled]{box-shadow:none;cursor:default;opacity:.65}button.round{border-radius:50%;box-shadow:0 2px .5rem 0 rgba(0,0,0,.25);height:3rem;line-height:3.5rem;margin:0;outline:none;padding:0;width:3rem;z-index:2}button.round.small{box-shadow:0 2px .35rem 0 rgba(0,0,0,.25);height:2rem;line-height:2rem;width:2rem}button:active,button:focus,button:hover{color:#fff}button:active{box-shadow:inset 0 3px .5rem rgba(0,0,0,.125)}button:active.round.small{box-shadow:inset 0 2px .35rem rgba(0,0,0,.125)}button.blue:active,button.blue:focus,button.blue:hover{background-color:#1976d2}button.blue{background-color:#1e88e5;color:#fff}button.blue:active,button.blue:focus,button.blue:hover{background-color:#2962ff}button.white{background-color:#fff;color:#2196f3}button.blue:active,button.white:focus,button.white:hover{background-color:#e3f2fd}button.outline{background-color:transparent;border:1px solid silver;box-shadow:none;color:#2196f3}button.outline:active,button.outline:focus,button.outline:hover{background-color:#e8eaf6}input,textarea{background:transparent;border:none;color:#666;font-family:inherit;font-size:1.1rem;margin:.25rem 0;outline:none;padding:0 .125rem}input[type=email],input[type=password],input[type=search],input[type=text],textarea{border-bottom:1px solid #ccc;box-shadow:0 1px 0 rgba(0,0,0,.1);height:2.5rem;transition:all .1s ease-in-out}input[type=email],input[type=password],input[type=text],textarea{width:100%}input[type=email]:focus,input[type=password]:focus,input[type=search]:focus,input[type=text]:focus,textarea:focus{border-bottom:1px solid #2196f3;box-shadow:0 1px 0 rgba(33,150,243,.25)}input[type=email].invalid,input[type=password].invalid,input[type=search].invalid,input[type=text].invalid,textarea.invalid{border-bottom:1px solid #e57373;box-shadow:0 1px 0 rgba(229,115,115,.25)}input[type=email]::placeholder,input[type=password]::placeholder,input[type=search]::placeholder,input[type=text]::placeholder,textarea::placeholder{color:#bbb;font-weight:lighter}input[type=password].with-visibility,input[type=text].with-visibility{margin-right:-2rem;padding-right:2rem}textarea{padding-top:.45rem;resize:none}::-webkit-scrollbar{width:.6rem}::-webkit-scrollbar-track{background-color:hsla(0,0%,100%,.1);-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.2)}::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3)}*{scrollbar-width:thin;scrollbar-color:silver}ul.menu{background-color:#fff;border-radius:.2rem;box-shadow:0 1px 6px rgba(0,0,0,.45);list-style:none;padding-bottom:.35rem;padding-top:.35rem;position:absolute;width:12rem;z-index:4}ul.menu>li{padding:.75rem .75rem .75rem 1.25rem}ul.menu>li:hover{background-color:#f5f5f5}ul.menu>li.separator{height:1px;margin:2px;padding:0}ul.menu>li.separator,ul.menu>li.separator:hover{background-color:#ccc}li .menuTrigger{border-radius:.6rem;height:1.2rem;line-height:1.2rem;opacity:0;position:absolute;right:.25rem;text-align:center;top:.25rem;width:1.5rem}li:hover .menuTrigger{opacity:1}li:hover .menuTrigger a{color:#757575}li.left:hover .menuTrigger{-text-shadow:#c5e1a5 0 0 15px,#c5e1a5 0 0 5px;background-image:radial-gradient(#c5e1a5 40%,transparent 75%)}li.right:hover .menuTrigger{-text-shadow:#fafafa 0 0 15px,#fafafa 0 0 5px;background-image:radial-gradient(#fafafa 40%,transparent 75%)}div.alert-container{align-items:center;-x-backdrop-filter:blur(4px);background:rgba(0,0,0,.33);display:flex;height:100%;justify-content:center;position:absolute;width:100%;z-index:3}div.alert{background-color:#fff;border-radius:4px;box-shadow:0 1px 6px rgba(0,0,0,.45);margin:auto 2rem;max-width:24rem;min-width:16rem;padding:1rem;width:content}div.alert .title{color:#2196f3;font-size:1.2rem;font-weight:500;padding:0 0 .35rem;width:100%}div.alert .content{padding:.5rem 0}.blue{color:#2196f3}.red{color:#d32f2f}.amber{color:#ffc107}.gray{color:#757575}.light-gray{color:#bbb}.large{font-size:120%}.small{font-size:90%}.float-right{float:right;margin-left:auto}.hr{background-color:#f0f0f0;box-shadow:inset 0 .25rem .25rem -.25rem rgba(0,0,0,.15),inset 0 -.25rem .25rem -.25rem rgba(0,0,0,.15);display:block;height:.45rem;min-height:.3rem;width:100%}.hr.thin{height:.015rem}.group-focus{outline:none}#mountPoint{height:100%;padding-bottom:3rem;padding-top:1rem}#noscript-message{background-color:#fff;border-radius:.25rem;box-shadow:1px 2px .3rem grey;display:flex;flex-direction:column;margin-left:auto;margin-right:auto;margin-top:5rem;max-width:30rem;overflow:hidden;position:relative}#noscript-title{background-color:#2196f3;color:#bbdefb;font-size:120%;font-weight:bolder;padding:1rem}#noscript-content{padding:1rem}#app-container{background-color:#fff;border-radius:.25rem;box-shadow:1px 2px .3rem grey;display:flex;height:100%;margin-left:auto;margin-right:auto;max-width:80rem;overflow:hidden;position:relative}#sidepanel{flex-grow:0;flex-shrink:0.3;min-width:18rem;width:24rem}#sidepanel,#topic-view{display:flex;flex-direction:column;height:100%;position:relative}#topic-view{overflow-x:hidden;width:100%}#info-view{display:flex;flex-direction:column;flex-grow:0;flex-shrink:0.3;height:100%;min-width:18rem;width:24rem}@media (max-width:960px){#mountPoint{padding:0}}@media (max-width:640px){#app-container{border-radius:0;box-shadow:none;width:100%}#info-view,#sidepanel{width:100%}}.center-medium-text{align-items:center;display:flex;font-size:1.4rem;height:100%;justify-content:center;text-align:center;width:100%}.nodisplay{display:none!important}.quoted{margin-left:1rem}.space-right{margin-right:.25rem}.rounded-container{background-color:#fafafa;border-radius:.1rem;margin:.25rem;padding:.25rem;position:relative}.in-place-edit{border-bottom:1px dashed #ddd;cursor:pointer;display:inline-block;font-family:inherit;font-size:1.1rem;height:2.5rem;line-height:2.25;margin:.25rem .125rem;vertical-align:baseline;width:100%}.in-place-edit.disabled{border-bottom:none;cursor:default}.in-place-edit.placeholder{color:#bbb}.in-place-edit .content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}table.permission-editor{width:100%}table.permission-editor td{font-size:1.1rem;margin:.35rem 0;vertical-align:middle}table.permission-editor td.checkbox{color:#999;text-align:center}.permission-editor .material-icons{font-size:1.1rem;line-height:1.1rem}.material-icons.clickable{border-bottom:none;cursor:pointer}.clickable{border-bottom:1px dashed #ddd}.clean-clickable,.clickable,.image-clickable{cursor:pointer}.panel-title{font-size:1.4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.caption-panel{align-items:center;box-shadow:0 1px 2px grey;display:flex;flex:none;height:4rem;overflow-x:hidden;padding:.5rem;white-space:nowrap;z-index:1}.dialog-buttons{display:flex;justify-content:flex-end;padding:.5rem}.dialog-buttons button{margin:0 .5rem}.avatar-box{flex-grow:0;flex-shrink:0;position:relative}.bot-form{display:flex;flex-direction:column;line-height:2rem;min-width:8rem;overflow:hidden}.bot-form div{min-height:2rem;vertical-align:middle}.bot-form button{background-color:#eef;color:#2196f3;display:inline-block;font-size:inherit;height:2rem;line-height:2rem;margin:.15rem;text-transform:none}.bot-form>div>button{width:auto}.bot-form button:active,.bot-form button:focus,.bot-form button:hover{background-color:#e3f2fd;outline:0}#side-caption-panel{background-color:#2196f3;color:#bbdefb}#side-caption-panel a{color:#bbdefb;line-height:1;padding-left:.5rem}#side-caption-panel :hover{color:#fff}#sidepanel-title{margin-left:.5rem;margin-right:auto}#self-avatar{border-radius:50%;flex:none;height:3rem;min-width:3rem;width:3rem}#self-avatar.avatar-box{font-size:1.8rem}#settings-form ul{list-style:none}#settings-form li{vertical-align:middle}#settings-form label{display:inline-block;padding-left:.5rem}input.search{text-indent:1.4rem}i.search{left:.6rem;position:absolute}.info-box{display:none;overflow:hidden;padding:1rem 1.5rem 1rem .5rem;position:relative}.info-box .cancel{position:absolute;right:.25rem;top:.5rem}.info-box.error{background-color:#ffcdd2;border-bottom:1px solid #ffbfc8;color:#b71c1c;display:flex}.info-box.warning{background-color:#fff9c4;border-bottom:1px solid #fff59d;color:#6d4c41;display:flex}.info-box.info{background-color:#e1f5fe;border-bottom:1px solid #b3e5fc;color:#0288d1;display:flex}.info-box .cancel .material-icons{color:#757575;font-size:1rem}.info-box.error .cancel .material-icons{color:#b71c1c}.info-box .icon{display:block;margin-right:.5rem}.info-box .icon .material-icons{font-size:1.5rem}.info-box.warning .icon .material-icons{color:#fbc02d}.info-box.error .icon .material-icons{color:#ef5350}.info-box.info .icon .material-icons{color:#0288d1}.flex-column{display:flex;flex-direction:column;height:100%;overflow:hidden}.flex-column.narrow{height:auto}.scrollable-panel{height:100%;margin-bottom:auto;margin-top:.25rem;overflow-y:auto}.contact-box{list-style:none;overflow-x:hidden}.contact-box>li{background:linear-gradient(90deg,transparent 3.5rem,#eee 1px,#eee) 0 100% /100% 1px no-repeat,#fff;display:flex;flex-grow:0;flex-shrink:0;min-height:3.75rem;overflow-x:hidden;padding:.35rem .25rem .5rem .35rem;position:relative}.contact-box>li:last-child{background:#fff}.contact-box>li:hover{background-color:#eceff1}.contact-box>li.selected{background-color:#cfd8dc}.contact-box>li.action{border-bottom:none;min-height:2.5rem}.contact-box .text-box{overflow-x:hidden}.contact-box .contact-title{font-size:1.05rem;overflow:hidden;text-overflow:ellipsis}.contact-box .contact-comment{font-weight:lighter;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.contact-box .avatar-box{font-size:1.8rem;height:3rem;margin-right:.35rem;min-height:3rem;min-width:3rem;overflow:hidden;padding:0;position:relative;width:3rem}.contact-box .avatar{border-radius:50%;height:3rem;width:3rem}.contact-box .avatar-box>.material-icons{font-size:2.4rem;line-height:3rem}.contact-box .avatar-box>.material-icons,.contact-box .text-box{display:flex;flex-direction:column;justify-content:space-around}.contact-box .action-text{cursor:pointer;font-size:.95rem;line-height:2.5rem;margin:0 auto;text-align:center}.contact-box img.channel{height:1rem;margin-left:.3rem;vertical-align:middle;width:1rem}.avatar-box .online,.offline{border-radius:50%;bottom:.1rem;display:inline-block;flex-shrink:0;height:.75rem;min-height:.75rem;min-width:.75rem;position:absolute;right:0;width:.75rem}.avatar-box .online{background-color:#4caf50}.avatar-box .offline{background-color:silver}.online.typing{animation:typing .5s infinite}@keyframes typing{0%,to{transform:translateX(0)}50%{transform:translateX(-.3rem)}}.contact-box .checkmark.material-icons{background-color:#fff;border:0 solid transparent;bottom:.05rem;color:#0097a7;display:inline-block;font-size:1.5rem;height:1.5rem;line-height:1.5rem;overflow:visible;position:absolute;right:.05rem;width:1.5rem}#add-topic{bottom:1rem;position:absolute;right:1rem}.panel-form{display:flex;flex-direction:column;padding:0}.panel-form-row{align-items:center}.panel-form-column,.panel-form-row{display:flex;flex-grow:0;flex-shrink:0;line-height:1.5;padding:.5rem .75rem}.panel-form-column{flex-direction:column}.panel-form-column>.panel-form-column,.panel-form-row>.panel-form-column{flex-grow:1;padding:0!important}.panel-form-column>.panel-form-row,.panel-form-row>.panel-form-row{padding:0!important}.avatar-upload{display:flex;flex-direction:column;flex-shrink:0;font-size:4.5rem;height:9rem;margin-left:.5rem;padding:0;position:relative;width:7rem}.avatar-upload.read-only{height:auto}.avatar-upload .clear-avatar{background-image:radial-gradient(#fff 40%,transparent 75%);font-size:1rem;opacity:0;position:absolute;right:0;top:0}.avatar-upload:hover .clear-avatar{opacity:1}.avatar-upload .avatar-box{height:7rem;position:relative;width:7rem}.avatar-upload .avatar-box>.material-icons{font-size:4rem;line-height:7rem;position:relative;vertical-align:middle}.avatar-upload:after{clear:both;content:".";display:block;height:0;visibility:hidden}.avatar-upload .blank{border:1px dashed #999;color:#999;flex-shrink:0;font-size:1rem;line-height:7rem;text-align:center;vertical-align:middle}.avatar-upload .blank,.avatar-upload .preview{border-radius:50%;height:7rem;overflow:hidden;width:7rem}.avatar-upload .inputfile.hidden{height:.1px;opacity:0;overflow:hidden;position:absolute;width:.1px}.avatar-upload .inputfile+label.round{align-items:center;background-color:#fafafa;border-radius:50%;bottom:0;box-shadow:0 1px 4px rgba(0,0,0,.4);cursor:pointer;display:flex;height:3rem;justify-content:center;line-height:3rem;margin-left:auto;margin-right:auto;margin-top:-1rem;width:3rem}.avatar-upload .inputfile:focus+label.round{outline:none}.avatar-upload .inputfile+label:hover,.avatar-upload .inputfile:focus+label{background-color:#e3f2fd;color:#42a5f5}#topic-caption-panel{background-color:#b0bec5}#topic-caption-panel a{color:#757575;text-decoration:none}#topic-caption-panel :hover{color:#000}#topic-caption-panel .avatar-box{font-size:1.8rem;height:3rem;margin-right:.35rem;min-width:3rem;position:relative;width:3rem}#topic-caption-panel .avatar-box>.material-icons{font-size:2.4rem;line-height:3rem}#topic-title-group{overflow-x:hidden}#hide-message-view{display:block;margin-right:.35rem}#topic-users{margin-left:auto;margin-right:1rem}#topic-users .avatar-box{display:inline-block;font-size:1rem;height:1.8rem;margin-right:.2rem;min-height:1.8rem;min-width:1.8rem;width:1.8rem}#topic-users .avatar-box>.material-icons{font-size:1.4rem;line-height:1.8rem}#topic-users>span{line-height:2rem;vertical-align:top}#messages-panel{background-color:#eceff1;background-image:url(../img/bg_messages.png);height:100%;overflow-y:scroll;padding:.75rem;position:relative}#messages-container{height:100%;overflow-y:hidden;position:relative}#write-only-background{background-image:repeating-linear-gradient(45deg,hsla(0,0%,100%,.5),hsla(0,0%,100%,.5) .5rem,hsla(0,0%,100%,.8) 0,hsla(0,0%,100%,.8) 1rem);height:100%;left:0;position:absolute;top:0;width:100%}#write-only-note{height:auto;top:50%;transform:translate(-50%,-50%);width:auto}#peer-messaging-disabled-note,#write-only-note{background-color:#fff;border-radius:.5rem;box-shadow:0 1px .5px rgba(0,0,0,.12);color:#666;left:50%;line-height:2rem;padding:.75rem 1.25rem;position:absolute;text-align:center}#peer-messaging-disabled-note{bottom:4.3rem;transform:translate(-50%);width:fit-content}#send-message-panel{align-items:center;background-color:#eceff1;box-shadow:0 -2px 3px -1px rgba(0,0,0,.1);display:flex;flex:none;height:4rem;padding:.4rem .4rem .4rem .6rem;z-index:2}#send-message-panel #writing-disabled{font-size:1.2rem;text-align:center;width:100%}#sendMessage{overflow:hidden;overflow-wrap:break-word}#send-message-panel .material-icons{min-width:1.75rem}#send-message-panel .material-icons.secondary,.material-icons.disabled{color:#999!important}#send-message-panel .material-icons.secondary:hover{color:#2196f3!important}.accept-invite-panel{background-color:#eceff1;box-shadow:0 -2px 3px -1px rgba(0,0,0,.1);width:100%;z-index:1}.accept-invite-panel .title{font-size:1.2rem;padding:.75rem}.accept-invite-panel .footer{background-color:#fafafa;padding-bottom:.35rem;text-align:center;white-space:nowrap}.accept-invite-panel button{border:1px solid transparent;box-shadow:0 1px 2px 0 rgba(0,0,0,.25);font-size:1rem;height:2em;line-height:2em;margin:.25rem}#dummy-view{align-items:center;background-color:#e0f7fa;display:flex;height:100%;justify-content:center;width:100%}#dummy-view a{display:block;text-align:center;text-decoration:none;vertical-align:middle}#image-preview{background-color:hsla(0,0%,100%,.9);display:flex;flex-direction:column;height:100%;left:0;position:absolute;top:0;width:100%;z-index:2}#image-preview-caption-panel{background-color:#eceff1;box-shadow:0 1px 2px silver;display:flex;height:4.6rem;justify-content:space-between;line-height:2.5rem;padding:1rem .75rem 0;z-index:3}#image-preview-caption-panel a{color:#757575;text-decoration:none}#image-preview-caption-panel a:hover{color:#000}#image-preview-container{align-items:center;display:flex;height:100%;justify-content:space-around;overflow:hidden;width:100%}#image-preview-footer{background-color:#eceff1;box-shadow:0 -2px 3px -1px rgba(0,0,0,.1);display:flex;height:3.2rem;justify-content:space-around;line-height:1.5rem}#image-preview-container .material-icons{font-size:6rem}.chat-box{list-style:none;margin:0 .5rem;padding:0 0 3.5rem}.chat-box.group{margin-left:-.4rem}.chat-box li{align-items:flex-end;display:flex;margin:0;padding:0}.chat-box .right{justify-content:flex-end}.chat-box .center{justify-content:center;margin-bottom:.5rem;margin-top:.5rem}.chat-box .bubble{border-radius:.5rem;box-shadow:0 1px .5px rgba(0,0,0,.12);display:flex;height:auto;margin:0;max-width:40rem;min-width:9rem;padding:.75rem .5rem .75rem 1.25rem;position:relative;text-align:left}.chat-box li.single{margin-bottom:.75rem;margin-top:.25rem}.chat-box li.first{margin-bottom:.15rem;margin-top:.25rem}.chat-box li.middle{margin-bottom:.15rem;margin-top:.15rem}.chat-box li.last{margin-bottom:.75rem;margin-top:.15rem}.chat-box .left .bubble{background-color:#c5e1a5}.chat-box .right .bubble{background-color:#fafafa}.chat-box .center .bubble{background-color:#e3f2fd;padding:.75rem .75rem .5rem}.chat-box .left .tip:before{border-color:transparent #c5e1a5 #c5e1a5 transparent;color:#c5e1a5;left:-.8rem;right:auto}.chat-box .left .tip:before,.chat-box .right .tip:before{border-style:solid;border-width:.62rem;bottom:0;box-shadow:0 1.6px .5px -.8px rgba(0,0,0,.12);content:"";height:0;position:absolute;top:auto;width:0}.chat-box .right .tip:before{border-color:transparent transparent #fafafa #fafafa;color:#fafafa;display:flex;justify-content:space-between;left:auto;right:-.8rem}.chat-box .avatar-box{font-size:.8rem;height:1.4rem;margin-bottom:.8rem;margin-right:.8rem;min-height:1.4rem;min-width:1.4rem;position:relative;width:1.4rem}.chat-box .bubble div.message-content{color:#212121;margin:0;max-width:36rem;overflow-wrap:break-word}.chat-box .bubble div.message-content:after{clear:both;content:".";display:block;height:0;visibility:hidden}.chat-box .timestamp{color:#777;display:inline-block;float:right;font-size:80%;padding-left:1rem;position:relative;top:.5rem;white-space:nowrap}.chat-box .typing{border-radius:.5rem;color:#aaa;display:inline-block;margin-top:.75rem;padding:.25rem .35rem;text-align:center;vertical-align:middle;width:2rem}.chat-box .author{color:#777;font-size:80%}.image-preview,.inline-image{border-radius:.1rem;display:block;overflow:hidden;position:relative}.inline-image{max-height:24rem;max-width:36rem}.inline-image>.rounded-container{border-left:.25rem solid transparent;border-right:.25rem solid transparent;bottom:2rem;margin:.25rem auto;position:relative}img.image-preview:before,img.inline-image:before{background:50% no-repeat #ccc url(../img/broken_image.png);color:#666;display:flex;font-size:.9rem;font-weight:lighter;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}img.inline-image:before{background-size:2rem 2rem;content:attr(alt)}img.image-preview:before{background-size:8rem 8rem;content:" "}.attachment{display:flex}.attachment:last-of-type{margin-bottom:-.45rem}#info-caption-panel{background-color:#b0bec5}#info-caption-panel a{color:#757575;line-height:1;text-decoration:none}#info-caption-panel :hover{color:#000}#info-title{margin-right:auto}#group-manager{display:flex;flex-direction:column;height:100%;overflow-y:hidden;position:relative}#group-manager-buttons{background-color:#eceff1;border-left:1px solid #ccc;box-shadow:0 -1px rgba(0,0,0,.1);display:flex;height:4rem;justify-content:space-around;padding:.4rem;z-index:2}ul.tabbar{background:#eee;flex-grow:0;flex-shrink:0;list-style:none;margin:0;overflow:hidden;padding:0 0 0 1rem;width:100%}ul.tabbar>li{float:left}ul.tabbar>li>a{box-shadow:inset 0 -2px 2.5px -1px rgba(0,0,0,.25);color:rgba(33,150,243,.6);display:block;font-size:1.3rem;font-variant:small-caps;font-weight:400;line-height:2rem;overflow:hidden;padding-left:1rem;padding-right:1rem;padding-top:.75rem;position:relative;text-align:center;text-decoration:none}ul.tabbar li.active>a{color:#2196f3}ul.tabbar li.active>a:after{animation:tabbar-border-expand .2s cubic-bezier(.4,0,.4,1) 0s alternate forwards;background:#2196f3;bottom:0;content:"";display:block;height:.15rem;left:0;position:absolute}@keyframes tabbar-border-expand{0%{opacity:0;width:0}to{opacity:1;width:100%}}.unread{background-color:#0097a7;border-radius:50%;color:#fff;display:inline-block;font-size:.75rem;font-weight:bolder;height:1.35rem;line-height:1.35rem;margin-left:.5rem;text-align:center;vertical-align:middle;width:1.35rem}.material-icons.as-badge{color:#bbb;font-size:1.25rem;padding-left:.2rem}.badge{align-self:flex-start;background-color:#e8e8e8;border:1px solid silver;border-radius:.2rem;color:#666;display:inline-block;font-family:Roboto Mono,Courier,monospace,sans-serif;font-size:.8rem;margin:.05rem .1rem;padding:.05rem .25rem}.badge.green{background-color:#efe;border-color:#9c9;color:#383}.badge.yellow{background-color:#ffe;border-color:#cc9;color:#660}.badge.blue{background-color:#eef;border-color:#99c;color:#339}.badge.red{background-color:#fee;border-color:#c99;color:#933}.badge.magenta{background-color:#fef;border-color:#c9c;color:#939}.lettertile{border-radius:50%;padding-bottom:100%;width:100%}.lettertile>div{align-items:center;border-radius:50%;bottom:0;color:hsla(0,0%,98%,.8);display:flex;flex-grow:0;flex-shrink:0;justify-content:center;left:0;line-height:1;position:absolute;right:0;text-align:center;text-transform:uppercase;top:0}.lettertile:hover{color:#fff}.light-color0{background-color:#ef9a9a}.light-color1{background-color:#90caf9}.light-color2{background-color:#b0bec5}.light-color3{background-color:#b39ddb}.light-color4{background-color:#ffab91}.light-color5{background-color:#a5d6a7}.light-color6{background-color:#eee}.light-color7{background-color:#e6ee9c}.light-color8{background-color:#c5e1a5}.light-color9{background-color:#f0e57d}.light-color10{background-color:#f48fb1}.light-color11{background-color:#9fa8da}.light-color12{background-color:#ffe082}.light-color13{background-color:#bcaaa4}.light-color14{background-color:#80deea}.light-color15{background-color:#ce93d8}.dark-color0{background-color:#c62828}.dark-color1{background-color:#ad1457}.dark-color2{background-color:#6a1b9a}.dark-color3{background-color:#4527a0}.dark-color4{background-color:#283593}.dark-color5{background-color:#1565c0}.dark-color6{background-color:#0277bd}.dark-color7{background-color:#00838f}.dark-color8{background-color:#00695c}.dark-color9{background-color:#2e7d32}.dark-color10{background-color:#558b2f}.dark-color11{background-color:#9e9d24}.dark-color12{background-color:#f9a825}.dark-color13{background-color:#ff8f00}.dark-color14{background-color:#ef6c00}.dark-color15{background-color:#d84315}.material-icons{font-size:1.4rem;line-height:1;text-align:center;vertical-align:middle}.material-icons.small{font-size:1rem}.material-icons.big{font-size:2.4rem}#self-avatar .material-icons{font-size:2.4rem;line-height:3rem}.avatar-box .material-icons{border-radius:50%;color:hsla(0,0%,98%,.8);height:inherit;width:inherit}.chip-input{align-items:center;background:transparent;border-bottom:1px solid #ccc;box-shadow:0 1px 0 rgba(0,0,0,.1);color:#666;cursor:text;display:flex;flex-grow:1;flex-wrap:wrap;font-size:1.1rem;font-weight:400;justify-content:flex-start;margin:.25rem 0;max-height:10rem;min-height:4rem;outline:none;overflow-y:scroll;text-align:center;transition:all .1s ease-in-out}.chip-input.focused{border-bottom:1px solid #2196f3;box-shadow:0 1px 0 rgba(33,150,243,.25)}.chip-input>input[type=text]{border:none;box-shadow:none;display:inline-block;flex:1 0 auto;min-width:4rem;width:auto}.chip,.chip-input>input[type=text]{height:1.8rem;line-height:1.8;margin:.125rem}.chip{align-items:center;background-color:#eee;border-radius:.9rem;display:flex;flex:0 0 auto;font-size:90%;white-space:nowrap}.chip.invalid{background-color:#fee;color:#c66}.chip>a{background-color:#aaa;border-radius:50%;color:#ccc;display:inline-block;height:1.175rem;line-height:1.15;margin:.3rem;text-decoration:none;width:1.175rem}.chip>a:focus,.chip>a:hover{background-color:#bbb;color:#ddd;text-decoration:none}.chip .avatar-box{font-size:1rem;height:1.8rem;margin-right:.2rem;min-height:1.8rem;min-width:1.8rem;position:relative;width:1.8rem}.chip .avatar-box .material-icons{font-size:1.4rem;line-height:1.8rem}.chip .spacer{display:inline-block;height:1.175rem;margin:.3rem;width:.25rem}.load-spinner-box{background-color:#fff;border-radius:50%;box-shadow:.1rem .1rem .15rem 1px rgba(0,0,0,.25);height:2.5rem;left:0;margin-left:auto;margin-right:auto;padding:.25rem;position:absolute;right:0;top:5rem;width:2.5rem;z-index:2}.loader-spinner{animation:spin 1.5s linear infinite;border:.35rem solid #f3f3f3;border-radius:50%;border-top-color:#1e88e5;height:2rem;width:2rem}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.uploader{display:flex}.uploader>div{background-color:#cfd8dc;border-radius:.1rem;height:.6rem;line-height:0;margin:.35rem;padding:.15rem;position:relative;width:6rem}.uploader>div>span{background-color:#1e88e5;border-radius:.08rem;display:inline-block;height:.3rem}.highlight{color:teal;font-weight:bolder}.highlight .preview{color:#5f9ea0;font-weight:inherit} \ No newline at end of file +*{box-sizing:border-box;font-family:Roboto,Arial,sans-serif;margin:0;padding:0;text-rendering:optimizeLegibility}body,html{background-color:silver;box-shadow:inset 0 10rem #3949ab;color:#666;font-size:10pt;height:100%;overflow:hidden;width:100%}tt{font-family:Roboto Mono,Courier,monospace}a{color:#2196f3;text-decoration:none}a:focus,a:hover{color:#0a6ebd;text-decoration:underline}a.danger{color:#d32f2f}a.danger:focus,a.danger:hover{color:#f44336}a.gray:focus,a.gray:hover{color:#999}.flat-button{align-items:center;display:flex;font-weight:400;height:2em;line-height:2em;margin:.15rem .35rem;text-align:center;text-transform:uppercase;touch-action:manipulation;vertical-align:middle;white-space:nowrap}.flat-button:focus,.flat-button:hover{text-decoration:none}.flat-button.faux{background-color:#eee;border:1px solid #999;border-radius:3px;display:inline-block;height:1.4em;line-height:1.4em;padding-left:.35rem;padding-right:.35rem;text-transform:none}form{line-height:1.5;padding:.5rem .75rem}form,label{font-size:1.1rem}label{margin-right:auto}label.small{color:#1e88e5;font-size:.95rem}img.avatar{border-radius:50%;height:100%;width:100%}button{border:1px solid transparent;border-radius:4px;box-shadow:0 1px 3px 0 rgba(0,0,0,.25);cursor:pointer;display:inline-block;font-family:inherit;font-size:1.05rem;font-weight:400;height:2.2rem;line-height:2.2rem;margin:0 .35rem;min-width:5rem;padding-left:1.2rem;padding-right:1.2rem;text-align:center;text-transform:uppercase;touch-action:manipulation;vertical-align:middle;white-space:nowrap}button[disabled],html input[disabled]{box-shadow:none;cursor:default;opacity:.65}button.round{border-radius:50%;box-shadow:0 2px .5rem 0 rgba(0,0,0,.25);height:3rem;line-height:3.5rem;margin:0;outline:none;padding:0;width:3rem;z-index:2}button.round.small{box-shadow:0 2px .35rem 0 rgba(0,0,0,.25);height:2rem;line-height:2rem;width:2rem}button:active,button:focus,button:hover{color:#fff}button:active{box-shadow:inset 0 3px .5rem rgba(0,0,0,.125)}button:active.round.small{box-shadow:inset 0 2px .35rem rgba(0,0,0,.125)}button.primary{background-color:#1e88e5;color:#fff}button.primary:active,button.primary:focus,button.primary:hover{background-color:#2962ff}button.secondary{background-color:#fff;color:#2196f3}button.secondary:active,button.secondary:focus,button.secondary:hover{background-color:#e3f2fd}button.outline{background-color:transparent;border:1px solid silver;box-shadow:none;color:#2196f3}button.outline:active,button.outline:focus,button.outline:hover{background-color:#e8eaf6}input,textarea{background:transparent;border:none;color:#666;font-family:inherit;font-size:1.1rem;margin:.25rem 0;outline:none;padding:0 .125rem}input[type=email],input[type=password],input[type=search],input[type=text],textarea{border-bottom:1px solid #ccc;box-shadow:0 1px 0 rgba(0,0,0,.1);height:2.5rem;transition:all .1s ease-in-out}input[type=email],input[type=password],input[type=text],textarea{width:100%}input[type=email]:focus,input[type=password]:focus,input[type=search]:focus,input[type=text]:focus,textarea:focus{border-bottom:1px solid #2196f3;box-shadow:0 1px 0 rgba(33,150,243,.25)}input[type=email].invalid,input[type=password].invalid,input[type=search].invalid,input[type=text].invalid,textarea.invalid{border-bottom:1px solid #e57373;box-shadow:0 1px 0 rgba(229,115,115,.25)}input[type=email]::placeholder,input[type=password]::placeholder,input[type=search]::placeholder,input[type=text]::placeholder,textarea::placeholder{color:#bbb;font-weight:lighter}input[type=password].with-visibility,input[type=text].with-visibility{margin-right:-2rem;padding-right:2rem}textarea{padding-top:.45rem;resize:none}::-webkit-scrollbar{width:.6rem}::-webkit-scrollbar-track{background-color:hsla(0,0%,100%,.1);-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.2)}::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3)}*{scrollbar-width:thin;scrollbar-color:silver}ul.menu{background-color:#fff;border-radius:.2rem;box-shadow:0 1px 6px rgba(0,0,0,.45);list-style:none;padding-bottom:.35rem;padding-top:.35rem;position:absolute;width:12rem;z-index:4}ul.menu>li{padding:.75rem .75rem .75rem 1.25rem}ul.menu>li:hover{background-color:#f5f5f5}ul.menu>li.separator{height:1px;margin:2px;padding:0}ul.menu>li.separator,ul.menu>li.separator:hover{background-color:#ccc}li .menuTrigger{border-radius:.6rem;height:1.2rem;line-height:1.2rem;opacity:0;position:absolute;right:.25rem;text-align:center;top:.25rem;width:1.5rem}li:hover .menuTrigger{opacity:1}li:hover .menuTrigger a{color:#757575}li.left:hover .menuTrigger{background-image:radial-gradient(#c5e1a5 40%,transparent 75%)}li.right:hover .menuTrigger{background-image:radial-gradient(#fafafa 40%,transparent 75%)}div.alert-container{align-items:center;background:rgba(0,0,0,.33);display:flex;height:100%;justify-content:center;position:absolute;width:100%;z-index:3}div.alert{background-color:#fff;border-radius:4px;box-shadow:0 1px 6px rgba(0,0,0,.45);margin:auto 2rem;max-width:24rem;min-width:16rem;padding:1rem;width:content}div.alert .title{color:#2196f3;font-size:1.2rem;font-weight:500;padding:0 0 .35rem;width:100%}div.alert .content{padding:.5rem 0}.blue{color:#2196f3}.red{color:#d32f2f}.amber{color:#ffc107}.gray{color:#757575}.light-gray{color:#bbb}.large{font-size:120%}.small{font-size:90%}.float-right{float:right;margin-left:auto}.hr{background-color:#f0f0f0;box-shadow:inset 0 .25rem .25rem -.25rem rgba(0,0,0,.15),inset 0 -.25rem .25rem -.25rem rgba(0,0,0,.15);display:block;height:.45rem;min-height:.3rem;width:100%}.hr.thin{height:.015rem}.group-focus{outline:none}#mountPoint{height:100%;padding-bottom:3rem;padding-top:1rem}#noscript-message{background-color:#fff;border-radius:.25rem;box-shadow:1px 2px .3rem grey;display:flex;flex-direction:column;margin-left:auto;margin-right:auto;margin-top:5rem;max-width:30rem;overflow:hidden;position:relative}#noscript-title{background-color:#2196f3;color:#bbdefb;font-size:120%;font-weight:bolder;padding:1rem}#noscript-content{padding:1rem}#app-container{background-color:#fff;border-radius:.25rem;box-shadow:1px 2px .3rem grey;display:flex;height:100%;margin-left:auto;margin-right:auto;max-width:80rem;overflow:hidden;position:relative}#sidepanel{flex-grow:0;flex-shrink:0.3;min-width:18rem;width:24rem}#sidepanel,#topic-view{display:flex;flex-direction:column;height:100%;position:relative}#topic-view{overflow-x:hidden;width:100%}#info-view{display:flex;flex-direction:column;flex-grow:0;flex-shrink:0.3;height:100%;min-width:18rem;width:24rem}@media (max-width:960px){#mountPoint{padding:0}}@media (max-width:640px){#app-container{border-radius:0;box-shadow:none;width:100%}#info-view,#sidepanel{width:100%}}.center-medium-text{align-items:center;display:flex;font-size:1.4rem;height:100%;justify-content:center;text-align:center;width:100%}.nodisplay{display:none!important}.quoted{margin-left:1rem}.space-right{margin-right:.25rem}.rounded-container{background-color:#fafafa;border-radius:.1rem;margin:.25rem;padding:.25rem;position:relative}.in-place-edit{border-bottom:1px dashed #ddd;cursor:pointer;display:inline-block;font-family:inherit;font-size:1.1rem;height:2.5rem;line-height:2.25;margin:.25rem .125rem;vertical-align:baseline;width:100%}.in-place-edit.disabled{border-bottom:none;cursor:default}.in-place-edit.placeholder{color:#bbb}.in-place-edit .content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}table.permission-editor{width:100%}table.permission-editor td{font-size:1.1rem;margin:.35rem 0;vertical-align:middle}table.permission-editor td.checkbox{color:#999;text-align:center}.permission-editor .material-icons{font-size:1.1rem;line-height:1.1rem}.material-icons.clickable{border-bottom:none;cursor:pointer}.clickable{border-bottom:1px dashed #ddd}.clean-clickable,.clickable,.image-clickable{cursor:pointer}.panel-title{font-size:1.4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.caption-panel{align-items:center;box-shadow:0 1px 2px grey;display:flex;flex:none;height:4rem;overflow-x:hidden;padding:.5rem;white-space:nowrap;z-index:1}.dialog-buttons{display:flex;justify-content:flex-end;padding:.5rem}.dialog-buttons button{margin:0 .5rem}.avatar-box{flex-grow:0;flex-shrink:0;position:relative}.bot-form{display:flex;flex-direction:column;line-height:2rem;min-width:8rem;overflow:hidden}.bot-form div{min-height:2rem;vertical-align:middle}.bot-form button{background-color:#eef;color:#2196f3;display:inline-block;font-size:inherit;height:2rem;line-height:2rem;margin:.15rem;text-transform:none}.bot-form>div>button{width:auto}.bot-form button:active,.bot-form button:focus,.bot-form button:hover{background-color:#e3f2fd;outline:0}#side-caption-panel{background-color:#2196f3;color:#bbdefb}#side-caption-panel a{color:#bbdefb;line-height:1;padding-left:.5rem}#side-caption-panel :hover{color:#fff}#sidepanel-title{margin-left:.5rem;margin-right:auto}#self-avatar{border-radius:50%;flex:none;height:3rem;min-width:3rem;width:3rem}#self-avatar.avatar-box{font-size:1.8rem}#settings-form ul{list-style:none}#settings-form li{vertical-align:middle}#settings-form label{display:inline-block;padding-left:.5rem}input.search{text-indent:1.4rem}i.search{left:.6rem;position:absolute}.info-box{display:none;overflow:hidden;padding:1rem 1.5rem 1rem .5rem;position:relative}.info-box .cancel{position:absolute;right:.25rem;top:.5rem}.info-box.error{background-color:#ffcdd2;border-bottom:1px solid #ffbfc8;color:#b71c1c;display:flex}.info-box.warning{background-color:#fff9c4;border-bottom:1px solid #fff59d;color:#6d4c41;display:flex}.info-box.info{background-color:#e1f5fe;border-bottom:1px solid #b3e5fc;color:#0288d1;display:flex}.info-box .cancel .material-icons{color:#757575;font-size:1rem}.info-box.error .cancel .material-icons{color:#b71c1c}.info-box .icon{display:block;margin-right:.5rem}.info-box .icon .material-icons{font-size:1.5rem}.info-box.warning .icon .material-icons{color:#fbc02d}.info-box.error .icon .material-icons{color:#ef5350}.info-box.info .icon .material-icons{color:#0288d1}.flex-column{display:flex;flex-direction:column;height:100%;overflow:hidden}.flex-column.narrow{height:auto}.scrollable-panel{height:100%;margin-bottom:auto;margin-top:.25rem;overflow-y:auto}.contact-box{list-style:none;overflow-x:hidden}.contact-box>li{background:linear-gradient(90deg,transparent 3.5rem,#eee 1px,#eee) 0 100% /100% 1px no-repeat,#fff;display:flex;flex-grow:0;flex-shrink:0;min-height:3.75rem;overflow-x:hidden;padding:.35rem .25rem .5rem .35rem;position:relative}.contact-box>li:last-child{background:#fff}.contact-box>li:hover{background-color:#eceff1}.contact-box>li.selected{background-color:#cfd8dc}.contact-box>li.action{border-bottom:none;min-height:2.5rem}.contact-box .text-box{overflow-x:hidden}.contact-box .contact-title{font-size:1.05rem;overflow:hidden;text-overflow:ellipsis}.contact-box .contact-comment{font-weight:lighter;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.contact-box .contact-comment b{font-weight:bolder}.contact-box .contact-comment .material-icons{margin-bottom:.2rem}.contact-box .avatar-box{font-size:1.8rem;height:3rem;margin-right:.35rem;min-height:3rem;min-width:3rem;overflow:hidden;padding:0;position:relative;width:3rem}.contact-box .avatar{border-radius:50%;height:3rem;width:3rem}.contact-box .avatar-box>.material-icons{font-size:2.4rem;line-height:3rem}.contact-box .avatar-box>.material-icons,.contact-box .text-box{display:flex;flex-direction:column;justify-content:space-around}.contact-box .action-text{cursor:pointer;font-size:.95rem;line-height:2.5rem;margin:0 auto;text-align:center}.contact-box img.channel{height:1rem;margin-left:.3rem;vertical-align:middle;width:1rem}.avatar-box .online,.offline{border-radius:50%;bottom:.1rem;flex-shrink:0;height:.75rem;min-height:.75rem;min-width:.75rem;position:absolute;right:0;width:.75rem}.avatar-box .online{background-color:#4caf50}.avatar-box .offline{background-color:silver}.online.typing{animation:typing .5s infinite}@keyframes typing{0%,to{transform:translateX(0)}50%{transform:translateX(-.3rem)}}.contact-box .checkmark.material-icons{background-color:#fff;border:0 solid transparent;bottom:.05rem;color:#0097a7;font-size:1.5rem;height:1.5rem;line-height:1.5rem;overflow:visible;position:absolute;right:.05rem;width:1.5rem}#add-topic{bottom:1rem;position:absolute;right:1rem}.panel-form{display:flex;flex-direction:column;padding:0}.panel-form-row{align-items:center}.panel-form-column,.panel-form-row{display:flex;flex-grow:0;flex-shrink:0;line-height:1.5;padding:.5rem .75rem}.panel-form-column{flex-direction:column}.panel-form-column>.panel-form-column,.panel-form-row>.panel-form-column{flex-grow:1;padding:0!important}.panel-form-column>.panel-form-row,.panel-form-row>.panel-form-row{padding:0!important}.avatar-upload{display:flex;flex-direction:column;flex-shrink:0;font-size:4.5rem;height:9rem;margin-left:.5rem;padding:0;position:relative;width:7rem}.avatar-upload.read-only{height:auto}.avatar-upload .clear-avatar{background-image:radial-gradient(#fff 40%,transparent 75%);font-size:1rem;opacity:0;position:absolute;right:0;top:0}.avatar-upload:hover .clear-avatar{opacity:1}.avatar-upload .avatar-box{height:7rem;position:relative;width:7rem}.avatar-upload .avatar-box>.material-icons{font-size:4rem;line-height:7rem;position:relative;vertical-align:middle}.avatar-upload:after{clear:both;content:".";display:block;height:0;visibility:hidden}.avatar-upload .blank{border:1px dashed #999;color:#999;flex-shrink:0;font-size:1rem;line-height:7rem;text-align:center;vertical-align:middle}.avatar-upload .blank,.avatar-upload .preview{border-radius:50%;height:7rem;overflow:hidden;width:7rem}.avatar-upload .inputfile.hidden{height:.1px;opacity:0;overflow:hidden;position:absolute;width:.1px}.avatar-upload .inputfile+label.round{align-items:center;background-color:#fafafa;border-radius:50%;bottom:0;box-shadow:0 1px 4px rgba(0,0,0,.4);cursor:pointer;display:flex;height:3rem;justify-content:center;line-height:3rem;margin-left:auto;margin-right:auto;margin-top:-1rem;width:3rem}.avatar-upload .inputfile:focus+label.round{outline:none}.avatar-upload .inputfile+label:hover,.avatar-upload .inputfile:focus+label{background-color:#e3f2fd;color:#42a5f5}#topic-caption-panel{background-color:#b0bec5}#topic-caption-panel a{color:#757575;text-decoration:none}#topic-caption-panel :hover{color:#000}#topic-caption-panel .avatar-box{font-size:1.8rem;height:3rem;margin-right:.35rem;min-width:3rem;position:relative;width:3rem}#topic-caption-panel .avatar-box>.material-icons{font-size:2.4rem;line-height:3rem}#topic-title-group{overflow-x:hidden}#hide-message-view{display:block;margin-right:.35rem}#topic-users{margin-left:auto;margin-right:1rem}#topic-users .avatar-box{display:inline-block;font-size:1rem;height:1.8rem;margin-right:.2rem;min-height:1.8rem;min-width:1.8rem;width:1.8rem}#topic-users .avatar-box>.material-icons{font-size:1.4rem;line-height:1.8rem}#topic-users>span{line-height:2rem;vertical-align:top}#messages-panel{background-color:#eceff1;background-image:url(../img/bg_messages.png);height:100%;overflow-y:scroll;padding:.75rem;position:relative}#messages-container{height:100%;overflow-y:hidden;position:relative}#write-only-background{background-image:repeating-linear-gradient(45deg,hsla(0,0%,100%,.5),hsla(0,0%,100%,.5) .5rem,hsla(0,0%,100%,.8) 0,hsla(0,0%,100%,.8) 1rem);height:100%;left:0;position:absolute;top:0;width:100%}#write-only-note{height:auto;top:50%;transform:translate(-50%,-50%);width:auto}#peer-messaging-disabled-note,#write-only-note{background-color:#fff;border-radius:.5rem;box-shadow:0 1px .5px rgba(0,0,0,.12);color:#666;left:50%;line-height:2rem;padding:.75rem 1.25rem;position:absolute;text-align:center}#peer-messaging-disabled-note{bottom:4.3rem;transform:translate(-50%);width:fit-content}#send-message-panel{align-items:center;background-color:#eceff1;box-shadow:0 -2px 3px -1px rgba(0,0,0,.1);display:flex;flex:none;height:4rem;padding:.4rem .4rem .4rem .6rem;z-index:2}#send-message-panel #writing-disabled{font-size:1.2rem;text-align:center;width:100%}#sendMessage{overflow:hidden;overflow-wrap:break-word}#send-message-panel .material-icons{min-width:1.75rem}#send-message-panel .material-icons.secondary,.material-icons.disabled{color:#999!important}#send-message-panel .material-icons.secondary:hover{color:#2196f3!important}.accept-invite-panel{background-color:#eceff1;box-shadow:0 -2px 3px -1px rgba(0,0,0,.1);width:100%;z-index:1}.accept-invite-panel .title{font-size:1.2rem;padding:.75rem}.accept-invite-panel .footer{background-color:#fafafa;padding-bottom:.35rem;text-align:center;white-space:nowrap}.accept-invite-panel button{border:1px solid transparent;box-shadow:0 1px 2px 0 rgba(0,0,0,.25);font-size:1rem;height:2em;line-height:2em;margin:.25rem}#dummy-view{align-items:center;background-color:#e0f7fa;display:flex;height:100%;justify-content:center;width:100%}#dummy-view a{display:block;text-align:center;text-decoration:none;vertical-align:middle}#image-preview{background-color:hsla(0,0%,100%,.9);display:flex;flex-direction:column;height:100%;left:0;position:absolute;top:0;width:100%;z-index:2}#image-preview-caption-panel{background-color:#eceff1;box-shadow:0 1px 2px silver;display:flex;height:4.6rem;justify-content:space-between;line-height:2.5rem;padding:1rem .75rem 0;z-index:3}#image-preview-caption-panel a{color:#757575;text-decoration:none}#image-preview-caption-panel a:hover{color:#000}#image-preview-container{align-items:center;display:flex;height:100%;justify-content:space-around;overflow:hidden;width:100%}#image-preview-footer{background-color:#eceff1;box-shadow:0 -2px 3px -1px rgba(0,0,0,.1);display:flex;height:3.2rem;justify-content:space-around;line-height:1.5rem}#image-preview-container .material-icons{font-size:6rem}.chat-box{list-style:none;margin:0 .5rem;padding:0 0 3.5rem}.chat-box.group{margin-left:-.4rem}.chat-box li{align-items:flex-end;display:flex;margin:0;padding:0}.chat-box .right{justify-content:flex-end}.chat-box .center{justify-content:center;margin-bottom:.5rem;margin-top:.5rem}.chat-box .bubble{border-radius:.5rem;box-shadow:0 1px .5px rgba(0,0,0,.12);display:flex;height:auto;margin:0;max-width:40rem;min-width:9rem;padding:.75rem .5rem;position:relative;text-align:left}.chat-box li.single{margin-bottom:.75rem;margin-top:.25rem}.chat-box li.first{margin-bottom:.15rem;margin-top:.25rem}.chat-box li.middle{margin-bottom:.15rem;margin-top:.15rem}.chat-box li.last{margin-bottom:.75rem;margin-top:.15rem}.chat-box .left .bubble{background-color:#c5e1a5;margin-right:.5rem}.chat-box .right .bubble{background-color:#fafafa;margin-left:1.75rem}.chat-box .center .bubble{background-color:#e3f2fd;padding:.75rem .75rem .5rem}.chat-box .left .tip:before{border-color:transparent #c5e1a5 #c5e1a5 transparent;color:#c5e1a5;left:-.8rem;right:auto}.chat-box .left .tip:before,.chat-box .right .tip:before{border-style:solid;border-width:.62rem;bottom:0;box-shadow:0 1.6px .5px -.8px rgba(0,0,0,.12);content:"";height:0;position:absolute;top:auto;width:0}.chat-box .right .tip:before{border-color:transparent transparent #fafafa #fafafa;color:#fafafa;display:flex;justify-content:space-between;left:auto;right:-.8rem}.chat-box .avatar-box{font-size:.8rem;height:1.4rem;margin-bottom:.8rem;margin-right:.8rem;min-height:1.4rem;min-width:1.4rem;position:relative;width:1.4rem}.chat-box .bubble div.content-meta{width:100%}.chat-box .bubble div.message-content{color:#212121;margin:0;max-width:36rem;overflow-wrap:break-word;padding:0 .75rem;position:relative;width:100%}.chat-box .bubble div.message-content:after{clear:both;content:".";display:block;height:0;visibility:hidden}.chat-box .timestamp-padding{display:inline-block;height:0;width:4rem}.chat-box .timestamp{float:right;position:relative;top:.35rem;white-space:nowrap}.chat-box .author,.chat-box .timestamp{color:#777;font-size:80%}.image-preview,.inline-image{border-radius:.1rem;overflow:hidden;position:relative}.inline-image{max-height:24rem;max-width:36rem}.inline-image>.rounded-container{border-left:.25rem solid transparent;border-right:.25rem solid transparent;bottom:2rem;margin:.25rem auto;position:relative}img.image-preview:before,img.inline-image:before{background:50% no-repeat #ccc url(../img/broken_image.png);color:#666;display:flex;font-size:.9rem;font-weight:lighter;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}img.inline-image:before{background-size:2rem 2rem;content:attr(alt)}img.image-preview:before{background-size:8rem 8rem;content:" "}.attachment{display:flex}.attachment:last-of-type{margin-bottom:-.45rem}#info-caption-panel{background-color:#b0bec5}#info-caption-panel a{color:#757575;line-height:1;text-decoration:none}#info-caption-panel :hover{color:#000}#info-title{margin-right:auto}#group-manager{display:flex;flex-direction:column;height:100%;overflow-y:hidden;position:relative}#group-manager-buttons{background-color:#eceff1;border-left:1px solid #ccc;box-shadow:0 -1px rgba(0,0,0,.1);display:flex;height:4rem;justify-content:space-around;padding:.4rem;z-index:2}ul.tabbar{background:#eee;flex-grow:0;flex-shrink:0;list-style:none;margin:0;overflow:hidden;padding:0 0 0 1rem;width:100%}ul.tabbar>li{float:left}ul.tabbar>li>a{box-shadow:inset 0 -2px 2.5px -1px rgba(0,0,0,.25);color:rgba(33,150,243,.6);font-size:1.3rem;font-variant:small-caps;font-weight:400;line-height:2rem;overflow:hidden;padding-left:1rem;padding-right:1rem;padding-top:.75rem;position:relative;text-align:center;text-decoration:none}ul.tabbar li.active>a{color:#2196f3}ul.tabbar li.active>a:after{animation:tabbar-border-expand .2s cubic-bezier(.4,0,.4,1) 0s alternate forwards;background:#2196f3;bottom:0;content:"";height:.15rem;left:0;position:absolute}@keyframes tabbar-border-expand{0%{opacity:0;width:0}to{opacity:1;width:100%}}.unread{background-color:#0097a7;border-radius:50%;color:#fff;display:inline-block;font-size:.75rem;font-weight:bolder;height:1.35rem;line-height:1.35rem;margin-left:.5rem;text-align:center;vertical-align:middle;width:1.35rem}.material-icons.as-badge{color:#bbb;font-size:1.25rem;padding-left:.2rem}.badge{align-self:flex-start;background-color:#e8e8e8;border:1px solid silver;border-radius:.2rem;color:#666;display:inline-block;font-family:Roboto Mono,Courier,monospace,sans-serif;font-size:.8rem;margin:.05rem .1rem;padding:.05rem .25rem}.badge.green{background-color:#efe;border-color:#9c9;color:#383}.badge.yellow{background-color:#ffe;border-color:#cc9;color:#660}.badge.blue{background-color:#eef;border-color:#99c;color:#339}.badge.red{background-color:#fee;border-color:#c99;color:#933}.badge.magenta{background-color:#fef;border-color:#c9c;color:#939}.lettertile{border-radius:50%;padding-bottom:100%;width:100%}.lettertile>div{align-items:center;border-radius:50%;bottom:0;color:hsla(0,0%,98%,.8);display:flex;flex-grow:0;flex-shrink:0;justify-content:center;left:0;line-height:1;position:absolute;right:0;text-align:center;text-transform:uppercase;top:0}.lettertile:hover{color:#fff}.light-color0{background-color:#ef9a9a}.light-color1{background-color:#90caf9}.light-color2{background-color:#b0bec5}.light-color3{background-color:#b39ddb}.light-color4{background-color:#ffab91}.light-color5{background-color:#a5d6a7}.light-color6{background-color:#eee}.light-color7{background-color:#e6ee9c}.light-color8{background-color:#c5e1a5}.light-color9{background-color:#f0e57d}.light-color10{background-color:#f48fb1}.light-color11{background-color:#9fa8da}.light-color12{background-color:#ffe082}.light-color13{background-color:#bcaaa4}.light-color14{background-color:#80deea}.light-color15{background-color:#ce93d8}.dark-color0{background-color:#c62828}.dark-color1{background-color:#ad1457}.dark-color2{background-color:#6a1b9a}.dark-color3{background-color:#4527a0}.dark-color4{background-color:#283593}.dark-color5{background-color:#1565c0}.dark-color6{background-color:#0277bd}.dark-color7{background-color:#00838f}.dark-color8{background-color:#00695c}.dark-color9{background-color:#2e7d32}.dark-color10{background-color:#558b2f}.dark-color11{background-color:#9e9d24}.dark-color12{background-color:#f9a825}.dark-color13{background-color:#ff8f00}.dark-color14{background-color:#ef6c00}.dark-color15{background-color:#d84315}.material-icons{font-size:1.4rem;line-height:1;text-align:center;vertical-align:middle}.material-icons.small{font-size:1rem}.material-icons.big{font-size:2.4rem}#self-avatar .material-icons{font-size:2.4rem;line-height:3rem}.avatar-box .material-icons{border-radius:50%;color:hsla(0,0%,98%,.8);height:inherit;width:inherit}.chip-input{align-items:center;background:transparent;border-bottom:1px solid #ccc;box-shadow:0 1px 0 rgba(0,0,0,.1);color:#666;cursor:text;display:flex;flex-grow:1;flex-wrap:wrap;font-size:1.1rem;font-weight:400;justify-content:flex-start;margin:.25rem 0;max-height:10rem;min-height:4rem;outline:none;overflow-y:scroll;text-align:center;transition:all .1s ease-in-out}.chip-input.focused{border-bottom:1px solid #2196f3;box-shadow:0 1px 0 rgba(33,150,243,.25)}.chip-input>input[type=text]{border:none;box-shadow:none;display:inline-block;flex:1 0 auto;min-width:4rem;width:auto}.chip,.chip-input>input[type=text]{height:1.8rem;line-height:1.8;margin:.125rem}.chip{align-items:center;background-color:#eee;border-radius:.9rem;display:flex;flex:0 0 auto;font-size:90%;white-space:nowrap}.chip.invalid{background-color:#fee;color:#c66}.chip>a{background-color:#aaa;border-radius:50%;color:#ccc;display:inline-block;height:1.175rem;line-height:1.15;margin:.3rem;text-decoration:none;width:1.175rem}.chip>a:focus,.chip>a:hover{background-color:#bbb;color:#ddd;text-decoration:none}.chip .avatar-box{font-size:1rem;height:1.8rem;margin-right:.2rem;min-height:1.8rem;min-width:1.8rem;position:relative;width:1.8rem}.chip .avatar-box .material-icons{font-size:1.4rem;line-height:1.8rem}.chip .spacer{display:inline-block;height:1.175rem;margin:.3rem;width:.25rem}.load-spinner-box{background-color:#fff;border-radius:50%;box-shadow:.1rem .1rem .15rem 1px rgba(0,0,0,.25);height:2.5rem;left:0;margin-left:auto;margin-right:auto;padding:.25rem;position:absolute;right:0;top:5rem;width:2.5rem;z-index:2}.loader-spinner{animation:spin 1.5s linear infinite;border:.35rem solid #f3f3f3;border-radius:50%;border-top-color:#1e88e5;height:2rem;width:2rem}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.uploader{display:flex}.uploader>div{background-color:#cfd8dc;border-radius:.1rem;height:.6rem;line-height:0;margin:.35rem;padding:.15rem;position:relative;width:6rem}.uploader>div>span{background-color:#1e88e5;border-radius:.08rem;display:inline-block;height:.3rem}.highlight{color:teal;font-weight:bolder}.highlight .preview{color:#5f9ea0;font-weight:inherit} \ No newline at end of file diff --git a/index-dev.html b/index-dev.html index 1da32c8c..cd2a0aa5 100644 --- a/index-dev.html +++ b/index-dev.html @@ -34,8 +34,8 @@ - - + + diff --git a/index.html b/index.html index d99b6d3d..e315bebf 100644 --- a/index.html +++ b/index.html @@ -24,9 +24,9 @@ - - - + + +