diff --git a/css/base.css b/css/base.css index 2bcc5a64..9d04465c 100644 --- a/css/base.css +++ b/css/base.css @@ -519,6 +519,11 @@ table.permission-editor td.checkbox { cursor: pointer; } +.clean-clickable { + cursor: pointer; +} + + /* END of top-level layout */ /* Sidepanel styles */ @@ -1072,18 +1077,35 @@ i.search { #write-only-note { position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); background-color: white; color: #666; height: auto; width: auto; line-height: 2rem; text-align: center; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - padding: 0.25rem 1.5rem; - box-shadow: 0.1rem 0.1rem 0.1rem rgba(0,0,0,0.2); + padding: 0.75rem 1.25rem 0.75rem 1.25rem; + border-radius: 0.5rem; + box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.12); } + +#peer-messaging-disabled-note { + position: absolute; + left: 50%; + bottom: 4.3rem; + transform: translate(-50%); + background-color: white; + color: #666; + width: fit-content; + line-height: 2rem; + text-align: center; + padding: 0.75rem 1.25rem 0.75rem 1.25rem; + border-radius: 0.5rem; + box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.12); +} + /* Footer-panel with the input for the new message */ #send-message-panel { display: flex; diff --git a/css/base.min.css b/css/base.min.css index 07594071..a5bbe738 100644 --- a/css/base.min.css +++ b/css/base.min.css @@ -1 +1 @@ -*{box-sizing:border-box;padding:0;margin:0;font-family:Roboto,Arial,sans-serif;text-rendering:optimizeLegibility}body,html{height:100%;width:100%;font-size:10pt;color:#666;overflow:hidden;background-color:silver;box-shadow:inset 0 10rem #3949ab}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.flat-button{display:flex;align-items:center;margin:.15rem .35rem;height:2em;line-height:2em;font-weight:400;text-align:center;vertical-align:middle;touch-action:manipulation;white-space:nowrap;text-transform:uppercase}a.flat-button:focus,a.flat-button:hover{text-decoration:none}form{padding:.5rem .75rem;line-height:1.5}form,label{font-size:1.1rem}label{margin-right:auto}label.small{color:#1e88e5;font-size:.95rem}img.avatar{width:100%;height:100%;border-radius:50%}button{display:inline-block;font-family:inherit;font-size:1.1rem;height:2.2em;line-height:2.2em;font-weight:400;text-align:center;vertical-align:middle;touch-action:manipulation;cursor:pointer;border:1px solid transparent;white-space:nowrap;padding-left:2rem;padding-right:2rem;border-radius:2px;box-shadow:0 2px 5px 0 rgba(0,0,0,.25);text-transform:uppercase}button[disabled],html input[disabled]{cursor:default;opacity:.65;box-shadow:none}button.round{border-radius:50%;width:3rem;height:3rem;padding:0;margin:0;line-height:3.5rem;outline:none;box-shadow:0 2px .5rem 0 rgba(0,0,0,.25);z-index:2}button.round.small{width:2rem;height:2rem;line-height:2rem;box-shadow:0 2px .35rem 0 rgba(0,0,0,.25)}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{background-color:#1e88e5;color:#fff}button.blue:active,button.blue:focus,button.blue:hover{background-color:#1976d2}button.white{background-color:#fff;color:#2196f3}button.blue:active,button.white:focus,button.white:hover{background-color:#e3f2fd}input,textarea{font-family:inherit;font-size:1.1rem;background:transparent;border:none;margin:.25rem 0;padding:0 .125rem;outline:none;color:#666}textarea{resize:none}input[type=email],input[type=password],input[type=search],input[type=text],textarea{height:2.5rem;border-bottom:1px solid #ccc;box-shadow:0 1px 0 rgba(0,0,0,.1);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]::placeholder,input[type=password]::placeholder,input[type=search]::placeholder,input[type=text]::placeholder,textarea::placeholder{color:#bbb}input[type=password].with-visibility,input[type=text].with-visibility{margin-right:-2rem;padding-right:2rem}::-webkit-scrollbar{width:.6rem}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.2);background-color:hsla(0,0%,100%,.1)}::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3)}ul.menu{position:absolute;list-style:none;width:12rem;border-radius:.2rem;padding-top:.35rem;padding-bottom:.35rem;box-shadow:0 1px 6px rgba(0,0,0,.45);background-color:#fff;z-index:4}ul.menu>li{padding:.75rem .75rem .75rem 1.25rem}ul.menu>li:hover{background-color:#f5f5f5}ul.menu>li.separator{padding:0;margin:2px;height:1px}ul.menu>li.separator,ul.menu>li.separator:hover{background-color:#ccc}li .menuTrigger{position:absolute;top:.25rem;right:.25rem;width:1.5rem;height:1.2rem;line-height:1.2rem;border-radius:.6rem;text-align:center;opacity:0}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%)}.blue{color:#2196f3}.red{color:#d32f2f}.amber{color:#ffc107}.gray{color:#757575}.light-gray{color:#bbb}.small{font-size:90%}.hr{display:block;width:100%;height:.6rem;min-height:.3rem;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)}.group-focus{outline:none}#mountPoint{height:100%;padding-top:1rem;padding-bottom:3rem}#noscript-alertbox{position:relative;display:flex;flex-direction:column;max-width:30rem;overflow:hidden;margin-top:5rem;margin-left:auto;margin-right:auto;border-radius:.25rem;box-shadow:1px 2px .3rem grey;background-color:#fff}#noscript-title{padding:1rem;font-size:120%;font-weight:bolder;background-color:#2196f3;color:#bbdefb}#noscript-content{padding:1rem}#app-container{max-width:80rem;overflow:hidden;margin-left:auto;margin-right:auto;border-radius:.25rem;box-shadow:1px 2px .3rem grey;background-color:#fff}#app-container,#sidepanel{position:relative;display:flex;height:100%}#sidepanel{flex-direction:column;flex-grow:0;flex-shrink:0.3;width:24rem;min-width:18rem}#topic-view{width:100%}#info-view,#topic-view{display:flex;flex-direction:column;height:100%}#info-view{flex-grow:0;flex-shrink:0.3;width:24rem;min-width:18rem}@media (max-width:960px){#mountPoint{padding:0}}@media (max-width:640px){#app-container{width:100%;border-radius:0;box-shadow:none}#info-view,#sidepanel{width:100%}}.center-medium-text{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:1.4rem}.nodisplay{display:none!important}.quoted{margin-left:1.5rem}.in-place-edit{display:inline-block;font-family:inherit;font-size:1.1rem;height:2.5rem;line-height:2.25;margin:.25rem .125rem;width:100%;vertical-align:baseline;border-bottom:1px dashed #ddd;cursor:pointer}.in-place-edit.disabled{border-bottom:none;cursor:default}.in-place-edit.placeholder{color:#bbb}.in-place-edit .content{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}table.permission-editor{width:100%}table.permission-editor td{margin:.35rem 0;font-size:1.1rem;vertical-align:middle}table.permission-editor td.checkbox{text-align:center;color:#999}.permission-editor .material-icons{font-size:1.1rem;line-height:1.1rem}.material-icons.clickable{cursor:pointer;border-bottom:none}.clickable{border-bottom:1px dashed #ddd}.clickable,.image-clickable{cursor:pointer}.panel-title{font-size:1.4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.caption-panel{display:flex;align-items:center;flex:none;padding:.5rem;height:4rem;white-space:nowrap;box-shadow:0 1px 2px grey;z-index:1}.dialog-buttons{display:flex;padding:.5rem;justify-content:flex-end}.dialog-buttons button{margin:0 .5rem}.avatar-box{position:relative;flex-grow:0;flex-shrink:0}.bot-form{display:flex;flex-direction:column;overflow:hidden;min-width:8rem;line-height:2rem;padding:.35rem}.bot-form div{min-height:2rem;vertical-align:middle}.bot-form button{display:inline-block;margin:.15rem;width:100%;background-color:#eef;color:#2196f3;font-size:inherit;text-transform:none;height:2rem;line-height:2rem}.bot-form>div>button{width:auto}.bot-form button:focus,button:active,button:hover{outline:0;background-color:#e3f2fd}#side-caption-panel{background-color:#2196f3;color:#bbdefb}#side-caption-panel a{color:#bbdefb;padding-left:.5rem;line-height:1}#side-caption-panel :hover{color:#fff}#sidepanel-title{margin-right:auto;margin-left:.5rem}#self-avatar{width:3rem;min-width:3rem;height:3rem;flex:none;border-radius:50%}#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{position:absolute;left:.6rem}.alert-box{position:relative;display:none;overflow:hidden;padding:1rem 1.5rem 1rem .5rem}.alert-box .cancel{position:absolute;right:.25rem;top:.5rem}.alert-box.error{display:flex;background-color:#ffcdd2;border-bottom:1px solid #ffbfc8;color:#b71c1c}.alert-box.warning{display:flex;background-color:#fff9c4;border-bottom:1px solid #fff59d;color:#6d4c41}.alert-box.info{display:flex;background-color:#e1f5fe;border-bottom:1px solid #b3e5fc;color:#0288d1}.alert-box .cancel .material-icons{font-size:1rem;color:#757575}.alert-box.error .cancel .material-icons{color:#b71c1c}.alert-box .icon{display:block;margin-right:.5rem}.alert-box .icon .material-icons{font-size:1.5rem}.alert-box.warning .icon .material-icons{color:#fbc02d}.alert-box.error .icon .material-icons{color:#ef5350}.alert-box.info .icon .material-icons{color:#0288d1}.flex-column{display:flex;flex-direction:column;height:100%;overflow:hidden}.scrollable-panel{overflow-y:auto;margin-top:.25rem;margin-bottom:auto;height:100%}.contact-box{list-style:none;overflow-x:hidden}.contact-box>li{display:flex;position:relative;padding:.35rem .25rem .5rem .35rem;min-height:3.5rem;flex-grow:0;flex-shrink:0;border-bottom:1px solid #eee;border-collapse:collapse;overflow-x:hidden}.contact-box>li:hover{background-color:#eceff1}.contact-box>li.selected{background-color:#cfd8dc}.contact-box>li.action{min-height:2.5rem;border-bottom:none}.contact-box .text-box{overflow-x:hidden}.contact-box .contact-title{font-size:1.05rem;text-overflow:ellipsis;overflow:hidden}.contact-box .contact-comment{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-weight:lighter}.contact-box .avatar-box{margin-right:.35rem;position:relative;width:3rem;min-width:3rem;height:3rem;min-height:3rem;font-size:1.8rem;overflow:hidden;padding:0}.contact-box .avatar{width:3rem;height:3rem;border-radius:50%}.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{text-align:center;font-size:.95rem;line-height:2.5rem;margin:0 auto;cursor:pointer}.avatar-box .online,.offline{display:inline-block;width:.75rem;min-width:.75rem;height:.75rem;min-height:.75rem;flex-shrink:0;border-radius:50%;position:absolute;right:0;bottom:.1rem}.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{display:inline-block;width:1.5rem;height:1.5rem;font-size:1.5rem;line-height:1.5rem;color:#0097a7;position:absolute;right:.05rem;bottom:.05rem;background-color:#fff;overflow:visible;border:0 solid transparent}#add-topic{position:absolute;right:1rem;bottom:1rem}.panel-form{display:flex;flex-direction:column;padding:0}.panel-form-row{justify-content:flex-start;align-items:center}.panel-form-column,.panel-form-row{display:flex;padding:.5rem .75rem;line-height:1.5;flex-grow:0;flex-shrink:0}.panel-form-column{flex-direction:column}.panel-form-column>.panel-form-column,.panel-form-row>.panel-form-column{padding:0!important;flex-grow:1}.panel-form-column>.panel-form-row,.panel-form-row>.panel-form-row{padding:0!important}.avatar-upload{display:flex;position:relative;flex-direction:column;flex-shrink:0;width:7rem;height:9rem;margin-left:.5rem;font-size:4.5rem;padding:0}.avatar-upload .clear-avatar{position:absolute;font-size:1rem;top:0;right:0;opacity:0;background-image:radial-gradient(#fff 40%,transparent 75%)}.avatar-upload:hover .clear-avatar{opacity:1}.avatar-upload .avatar-box{position:relative;width:7rem;height:7rem}.avatar-upload .avatar-box>.material-icons{position:relative;font-size:4rem;line-height:7rem;vertical-align:middle}.avatar-upload:after{content:".";display:block;height:0;clear:both;visibility:hidden}.avatar-upload .blank{text-align:center;vertical-align:middle;border:1px dashed #999;font-size:1rem;flex-shrink:0;width:7rem;height:7rem;overflow:hidden;color:#999;line-height:7rem;border-radius:50%}.avatar-upload .preview{width:7rem;height:7rem;overflow:hidden;border-radius:50%}.avatar-upload .inputfile.hidden{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute}.avatar-upload .inputfile+label.round{display:flex;align-items:center;justify-content:center;cursor:pointer;width:3rem;height:3rem;line-height:3rem;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.4);margin-left:auto;margin-right:auto;margin-top:-1rem;bottom:0;background-color:#fafafa}.avatar-upload .inputfile:focus+label.round{outline:none}.avatar-upload .inputfile+label:hover,.avatar-upload .inputfile:focus+label{background-color:#e3f2fd;color:#42a5f5}#topic-view{position:relative}#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{position:relative;width:3rem;min-width:3rem;height:3rem;font-size:1.8rem;margin-right:.35rem}#topic-caption-panel .avatar-box>.material-icons{font-size:2.4rem;line-height:3rem}#hide-message-view{display:block;margin-right:.35rem}#topic-users{margin-left:auto;margin-right:1rem}#topic-users .avatar-box{display:inline-block;width:1.8rem;min-width:1.8rem;height:1.8rem;min-height:1.8rem;font-size:1rem;margin-right:.2rem}#messages-panel{position:relative;padding:.75rem;overflow-y:scroll;background-color:#eceff1;height:100%;background-image:url(../img/ignasi_pattern_s.png)}#messages-container{position:relative;overflow-y:hidden;height:100%}#write-only-background{position:absolute;top:0;left:0;height:100%;width:100%;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)}#write-only-note{position:absolute;background-color:#fff;color:#666;height:auto;width:auto;line-height:2rem;text-align:center;top:50%;left:50%;transform:translate(-50%,-50%);padding:.25rem 1.5rem;box-shadow:.1rem .1rem .1rem rgba(0,0,0,.2)}#send-message-panel{display:flex;align-items:center;flex:none;padding:.4rem .4rem .4rem .6rem;background-color:#eceff1;box-shadow:0 -2px 3px -1px rgba(0,0,0,.1);z-index:2;height:4rem}#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;white-space:nowrap;padding-bottom:.35rem;text-align:center}.accept-invite-panel button{font-size:1rem;height:2em;line-height:2em;border:1px solid transparent;margin:.25rem;box-shadow:0 1px 2px 0 rgba(0,0,0,.25)}#dummy-view{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#e0f7fa}#dummy-view a{text-decoration:none;display:block;text-align:center;vertical-align:middle}#image-preview{position:absolute;display:flex;flex-direction:column;top:0;left:0;width:100%;height:100%;z-index:2;background-color:hsla(0,0%,100%,.9)}#image-preview-caption-panel{display:flex;justify-content:space-between;background-color:transparent;line-height:2.5rem;height:3.5rem;padding:1rem .75rem 0}#image-preview-caption-panel a{color:#757575;text-decoration:none}#image-preview-caption-panel a:hover{color:#000}#image-preview-container{margin:auto;overflow:hidden}#image-preview-footer{display:flex;justify-content:space-around;height:3.2rem;line-height:1.5rem;background-color:transparent}.chat-box{list-style:none;padding:0 0 3.5rem;margin:0 .5rem}.chat-box.group{margin-left:-.4rem}.chat-box li{display:flex;margin:0;padding:0;align-items:flex-end}.chat-box .right{justify-content:flex-end}.chat-box .bubble{display:flex;position:relative;max-width:40rem;min-width:12rem;height:auto;padding:.75rem .5rem .75rem 1.25rem;margin:0;text-align:left;border-radius:.5rem;box-shadow:0 1px .5px rgba(0,0,0,.12)}.chat-box li.single{margin-top:.25rem;margin-bottom:.75rem}.chat-box li.first{margin-top:.25rem;margin-bottom:.15rem}.chat-box li.middle{margin-top:.15rem;margin-bottom:.15rem}.chat-box li.last{margin-top:.15rem;margin-bottom:.75rem}.chat-box .left .bubble{background-color:#c5e1a5}.chat-box .right .bubble{background-color:#fafafa}.chat-box .left .tip:before{right:auto;left:-.8rem;color:#c5e1a5;border-color:transparent #c5e1a5 #c5e1a5 transparent}.chat-box .left .tip:before,.chat-box .right .tip:before{content:"";position:absolute;width:0;height:0;top:auto;bottom:0;border-style:solid;border-width:.62rem;box-shadow:0 1.6px .5px -.8px rgba(0,0,0,.12)}.chat-box .right .tip:before{display:flex;justify-content:space-between;left:auto;right:-.8rem;color:#fafafa;border-color:transparent transparent #fafafa #fafafa;border-bottom-color:inherit;border-left-color:inherit}.chat-box .avatar-box{position:relative;width:1.4rem;min-width:1.4rem;height:1.4rem;min-height:1.4rem;font-size:.8rem;margin-bottom:.8rem;margin-right:.8rem}.chat-box .bubble div.message-content{color:#212121;margin:0;max-width:36rem;overflow-wrap:break-word}.chat-box .bubble div.message-content:after{content:".";display:block;height:0;clear:both;visibility:hidden}.chat-box .timestamp{display:inline-block;position:relative;font-size:80%;color:#777;padding-left:1rem;top:.5rem;float:right;white-space:nowrap}.chat-box .typing{display:inline-block;border-radius:.5rem;width:2rem;padding:.25rem .35rem;vertical-align:middle;text-align:center;color:#aaa;margin-top:.75rem}.chat-box .author{font-size:80%;color:#777}.inline-image{max-width:36rem;max-height:24rem;overflow:hidden;border-radius:.1rem;display:block}.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{position:relative;display:flex;flex-direction:column;height:100%}#group-manager-buttons{display:flex;background-color:#eceff1;box-shadow:0 -1px rgba(0,0,0,.1);z-index:2;justify-content:space-around;padding:.4rem;height:4rem;border-left:1px solid #ccc}ul.tabbar{flex-shrink:0;flex-grow:0;background:#eee;list-style:none;margin:0;width:100%;overflow:hidden;padding:0 0 0 1rem}ul.tabbar>li{float:left}ul.tabbar>li>a{position:relative;padding-top:.75rem;padding-left:1rem;padding-right:1rem;display:block;text-align:center;line-height:2rem;font-weight:400;font-size:1.3rem;font-variant:small-caps;text-decoration:none;color:rgba(33,150,243,.6);overflow:hidden;box-shadow:inset 0 -2px 2.5px -1px rgba(0,0,0,.25)}ul.tabbar li.active>a{color:#2196f3}ul.tabbar li.active>a:after{height:.15rem;display:block;content:"";bottom:0;left:0;position:absolute;background:#2196f3;animation:tabbar-border-expand .2s cubic-bezier(.4,0,.4,1) 0s alternate forwards}@keyframes tabbar-border-expand{0%{opacity:0;width:0}to{opacity:1;width:100%}}.unread{font-weight:bolder;background-color:#0097a7;color:#fff;border-radius:50%;width:1.35rem;height:1.35rem;margin-left:.5rem;line-height:1.35rem;text-align:center;vertical-align:middle}.badge,.unread{display:inline-block;font-size:.75rem}.badge{font-family:Roboto Mono,Courier,monospace,sans-serif;border:1px solid #666;background-color:#eee;color:#666;padding:0 .15rem;margin-left:.1rem;margin-right:.1rem;margin-bottom:.1rem;border-radius:.15rem;align-self:flex-start}.badge.green{border-color:#383;background-color:#efe;color:#383}.badge.yellow{border-color:#660;background-color:#ffe;color:#660}.badge.blue{border-color:#339;background-color:#eef;color:#339}.badge.red{border-color:#933;background-color:#fee;color:#933}.badge.magenta{border-color:#939;background-color:#fef;color:#939}.lettertile{width:100%;padding-bottom:100%;border-radius:50%}.lettertile>div{display:flex;flex-shrink:0;flex-grow:0;position:absolute;top:0;bottom:0;left:0;right:0;text-transform:uppercase;align-items:center;justify-content:center;text-align:center;border-radius:50%;line-height:1;color:hsla(0,0%,98%,.8)}.lettertile:hover{color:#fff}.lettertile.color0{background-color:#ef9a9a}.lettertile.color1{background-color:#90caf9}.lettertile.color2{background-color:#b0bec5}.lettertile.color3{background-color:#b39ddb}.lettertile.color4{background-color:#ffab91}.lettertile.color5{background-color:#a5d6a7}.lettertile.color6{background-color:#eee}.lettertile.color7{background-color:#e6ee9c}.lettertile.color8{background-color:#c5e1a5}.lettertile.color9{background-color:#f0e57d}.lettertile.color10{background-color:#f48fb1}.lettertile.color11{background-color:#9fa8da}.lettertile.color12{background-color:#ffe082}.lettertile.color13{background-color:#bcaaa4}.lettertile.color14{background-color:#80deea}.lettertile.color15{background-color:#ce93d8}.lettertile.dark-color0{background-color:#c62828}.lettertile.dark-color1{background-color:#ad1457}.lettertile.dark-color2{background-color:#6a1b9a}.lettertile.dark-color3{background-color:#4527a0}.lettertile.dark-color4{background-color:#283593}.lettertile.dark-color5{background-color:#1565c0}.lettertile.dark-color6{background-color:#0277bd}.lettertile.dark-color7{background-color:#00838f}.lettertile.dark-color8{background-color:#00695c}.lettertile.dark-color9{background-color:#2e7d32}.lettertile.dark-color10{background-color:#558b2f}.lettertile.dark-color11{background-color:#9e9d24}.lettertile.dark-color12{background-color:#f9a825}.lettertile.dark-color13{background-color:#ff8f00}.lettertile.dark-color14{background-color:#ef6c00}.lettertile.dark-color15{background-color:#d84315}.material-icons{font-size:1.4rem;line-height:1;vertical-align:middle;text-align:center}.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{color:hsla(0,0%,98%,.8);background-color:silver;border-radius:50%;width:inherit;height:inherit}.chip-input{display:flex;flex-wrap:wrap;flex-grow:1;cursor:text;font-size:1.1rem;font-weight:400;background:transparent;border-bottom:1px solid #ccc;box-shadow:0 1px 0 rgba(0,0,0,.1);transition:all .1s ease-in-out;max-height:10rem;min-height:4rem;overflow-y:scroll;margin:.25rem 0;outline:none;color:#666;align-items:center;justify-content:flex-start;text-align:center}.chip-input.focused{border-bottom:1px solid #2196f3;box-shadow:0 1px 0 rgba(33,150,243,.25)}.chip-input>input[type=text]{display:inline-block;width:auto;border:none;box-shadow:none;min-width:4rem;flex:1 0 auto}.chip,.chip-input>input[type=text]{line-height:1.8;height:1.8rem;margin:.125rem}.chip{display:flex;flex:0 0 auto;align-items:center;border-radius:.9rem;background-color:#eee;white-space:nowrap;font-size:90%}.chip>a{display:inline-block;color:#ccc;background-color:#aaa;border-radius:50%;margin:.3rem;width:1.175rem;height:1.175rem;line-height:1.15;text-decoration:none}.chip>a:focus,.chip>a:hover{text-decoration:none;color:#ddd;background-color:#bbb}.chip .avatar-box{position:relative;width:1.8rem;min-width:1.8rem;height:1.8rem;min-height:1.8rem;font-size:1rem;margin-right:.2rem}.chip .avatar-box .material-icons{font-size:1.4rem;line-height:1.8rem}.chip .spacer{display:inline-block;margin:.3rem;width:.25rem;height:1.175rem}.load-spinner-box{position:absolute;box-shadow:.1rem .1rem .15rem 1px rgba(0,0,0,.25);border-radius:50%;padding:.25rem;width:2.5rem;height:2.5rem;left:0;right:0;top:5rem;margin-left:auto;margin-right:auto;background-color:#fff;z-index:2}.loader-spinner{border-radius:50%;border:.35rem solid #f3f3f3;border-top-color:#1e88e5;width:2rem;height:2rem;animation:spin 1.5s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.uploader{display:flex}.uploader>div{position:relative;height:.6rem;padding:.15rem;margin:.35rem;width:6rem;line-height:0;border-radius:.1rem;background-color:#cfd8dc}.uploader>div>span{display:inline-block;height:.3rem;background-color:#1e88e5;border-radius:.08rem} \ No newline at end of file +*{box-sizing:border-box;padding:0;margin:0;font-family:Roboto,Arial,sans-serif;text-rendering:optimizeLegibility}body,html{height:100%;width:100%;font-size:10pt;color:#666;overflow:hidden;background-color:silver;box-shadow:inset 0 10rem #3949ab}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.flat-button{display:flex;align-items:center;margin:.15rem .35rem;height:2em;line-height:2em;font-weight:400;text-align:center;vertical-align:middle;touch-action:manipulation;white-space:nowrap;text-transform:uppercase}a.flat-button:focus,a.flat-button:hover{text-decoration:none}form{padding:.5rem .75rem;line-height:1.5}form,label{font-size:1.1rem}label{margin-right:auto}label.small{color:#1e88e5;font-size:.95rem}img.avatar{width:100%;height:100%;border-radius:50%}button{display:inline-block;font-family:inherit;font-size:1.1rem;height:2.2em;line-height:2.2em;font-weight:400;text-align:center;vertical-align:middle;touch-action:manipulation;cursor:pointer;border:1px solid transparent;white-space:nowrap;padding-left:2rem;padding-right:2rem;border-radius:2px;box-shadow:0 2px 5px 0 rgba(0,0,0,.25);text-transform:uppercase}button[disabled],html input[disabled]{cursor:default;opacity:.65;box-shadow:none}button.round{border-radius:50%;width:3rem;height:3rem;padding:0;margin:0;line-height:3.5rem;outline:none;box-shadow:0 2px .5rem 0 rgba(0,0,0,.25);z-index:2}button.round.small{width:2rem;height:2rem;line-height:2rem;box-shadow:0 2px .35rem 0 rgba(0,0,0,.25)}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{background-color:#1e88e5;color:#fff}button.blue:active,button.blue:focus,button.blue:hover{background-color:#1976d2}button.white{background-color:#fff;color:#2196f3}button.blue:active,button.white:focus,button.white:hover{background-color:#e3f2fd}input,textarea{font-family:inherit;font-size:1.1rem;background:transparent;border:none;margin:.25rem 0;padding:0 .125rem;outline:none;color:#666}textarea{resize:none}input[type=email],input[type=password],input[type=search],input[type=text],textarea{height:2.5rem;border-bottom:1px solid #ccc;box-shadow:0 1px 0 rgba(0,0,0,.1);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]::placeholder,input[type=password]::placeholder,input[type=search]::placeholder,input[type=text]::placeholder,textarea::placeholder{color:#bbb}input[type=password].with-visibility,input[type=text].with-visibility{margin-right:-2rem;padding-right:2rem}::-webkit-scrollbar{width:.6rem}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.2);background-color:hsla(0,0%,100%,.1)}::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3)}ul.menu{position:absolute;list-style:none;width:12rem;border-radius:.2rem;padding-top:.35rem;padding-bottom:.35rem;box-shadow:0 1px 6px rgba(0,0,0,.45);background-color:#fff;z-index:4}ul.menu>li{padding:.75rem .75rem .75rem 1.25rem}ul.menu>li:hover{background-color:#f5f5f5}ul.menu>li.separator{padding:0;margin:2px;height:1px}ul.menu>li.separator,ul.menu>li.separator:hover{background-color:#ccc}li .menuTrigger{position:absolute;top:.25rem;right:.25rem;width:1.5rem;height:1.2rem;line-height:1.2rem;border-radius:.6rem;text-align:center;opacity:0}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%)}.blue{color:#2196f3}.red{color:#d32f2f}.amber{color:#ffc107}.gray{color:#757575}.light-gray{color:#bbb}.small{font-size:90%}.hr{display:block;width:100%;height:.6rem;min-height:.3rem;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)}.group-focus{outline:none}#mountPoint{height:100%;padding-top:1rem;padding-bottom:3rem}#noscript-alertbox{position:relative;display:flex;flex-direction:column;max-width:30rem;overflow:hidden;margin-top:5rem;margin-left:auto;margin-right:auto;border-radius:.25rem;box-shadow:1px 2px .3rem grey;background-color:#fff}#noscript-title{padding:1rem;font-size:120%;font-weight:bolder;background-color:#2196f3;color:#bbdefb}#noscript-content{padding:1rem}#app-container{max-width:80rem;overflow:hidden;margin-left:auto;margin-right:auto;border-radius:.25rem;box-shadow:1px 2px .3rem grey;background-color:#fff}#app-container,#sidepanel{position:relative;display:flex;height:100%}#sidepanel{flex-direction:column;flex-grow:0;flex-shrink:0.3;width:24rem;min-width:18rem}#topic-view{width:100%}#info-view,#topic-view{display:flex;flex-direction:column;height:100%}#info-view{flex-grow:0;flex-shrink:0.3;width:24rem;min-width:18rem}@media (max-width:960px){#mountPoint{padding:0}}@media (max-width:640px){#app-container{width:100%;border-radius:0;box-shadow:none}#info-view,#sidepanel{width:100%}}.center-medium-text{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:1.4rem}.nodisplay{display:none!important}.quoted{margin-left:1.5rem}.in-place-edit{display:inline-block;font-family:inherit;font-size:1.1rem;height:2.5rem;line-height:2.25;margin:.25rem .125rem;width:100%;vertical-align:baseline;border-bottom:1px dashed #ddd;cursor:pointer}.in-place-edit.disabled{border-bottom:none;cursor:default}.in-place-edit.placeholder{color:#bbb}.in-place-edit .content{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}table.permission-editor{width:100%}table.permission-editor td{margin:.35rem 0;font-size:1.1rem;vertical-align:middle}table.permission-editor td.checkbox{text-align:center;color:#999}.permission-editor .material-icons{font-size:1.1rem;line-height:1.1rem}.material-icons.clickable{cursor:pointer;border-bottom:none}.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{display:flex;align-items:center;flex:none;padding:.5rem;height:4rem;white-space:nowrap;box-shadow:0 1px 2px grey;z-index:1}.dialog-buttons{display:flex;padding:.5rem;justify-content:flex-end}.dialog-buttons button{margin:0 .5rem}.avatar-box{position:relative;flex-grow:0;flex-shrink:0}.bot-form{display:flex;flex-direction:column;overflow:hidden;min-width:8rem;line-height:2rem;padding:.35rem}.bot-form div{min-height:2rem;vertical-align:middle}.bot-form button{display:inline-block;margin:.15rem;width:100%;background-color:#eef;color:#2196f3;font-size:inherit;text-transform:none;height:2rem;line-height:2rem}.bot-form>div>button{width:auto}.bot-form button:focus,button:active,button:hover{outline:0;background-color:#e3f2fd}#side-caption-panel{background-color:#2196f3;color:#bbdefb}#side-caption-panel a{color:#bbdefb;padding-left:.5rem;line-height:1}#side-caption-panel :hover{color:#fff}#sidepanel-title{margin-right:auto;margin-left:.5rem}#self-avatar{width:3rem;min-width:3rem;height:3rem;flex:none;border-radius:50%}#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{position:absolute;left:.6rem}.alert-box{position:relative;display:none;overflow:hidden;padding:1rem 1.5rem 1rem .5rem}.alert-box .cancel{position:absolute;right:.25rem;top:.5rem}.alert-box.error{display:flex;background-color:#ffcdd2;border-bottom:1px solid #ffbfc8;color:#b71c1c}.alert-box.warning{display:flex;background-color:#fff9c4;border-bottom:1px solid #fff59d;color:#6d4c41}.alert-box.info{display:flex;background-color:#e1f5fe;border-bottom:1px solid #b3e5fc;color:#0288d1}.alert-box .cancel .material-icons{font-size:1rem;color:#757575}.alert-box.error .cancel .material-icons{color:#b71c1c}.alert-box .icon{display:block;margin-right:.5rem}.alert-box .icon .material-icons{font-size:1.5rem}.alert-box.warning .icon .material-icons{color:#fbc02d}.alert-box.error .icon .material-icons{color:#ef5350}.alert-box.info .icon .material-icons{color:#0288d1}.flex-column{display:flex;flex-direction:column;height:100%;overflow:hidden}.scrollable-panel{overflow-y:auto;margin-top:.25rem;margin-bottom:auto;height:100%}.contact-box{list-style:none;overflow-x:hidden}.contact-box>li{display:flex;position:relative;padding:.35rem .25rem .5rem .35rem;min-height:3.5rem;flex-grow:0;flex-shrink:0;border-bottom:1px solid #eee;border-collapse:collapse;overflow-x:hidden}.contact-box>li:hover{background-color:#eceff1}.contact-box>li.selected{background-color:#cfd8dc}.contact-box>li.action{min-height:2.5rem;border-bottom:none}.contact-box .text-box{overflow-x:hidden}.contact-box .contact-title{font-size:1.05rem;text-overflow:ellipsis;overflow:hidden}.contact-box .contact-comment{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-weight:lighter}.contact-box .avatar-box{margin-right:.35rem;position:relative;width:3rem;min-width:3rem;height:3rem;min-height:3rem;font-size:1.8rem;overflow:hidden;padding:0}.contact-box .avatar{width:3rem;height:3rem;border-radius:50%}.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{text-align:center;font-size:.95rem;line-height:2.5rem;margin:0 auto;cursor:pointer}.avatar-box .online,.offline{display:inline-block;width:.75rem;min-width:.75rem;height:.75rem;min-height:.75rem;flex-shrink:0;border-radius:50%;position:absolute;right:0;bottom:.1rem}.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{display:inline-block;width:1.5rem;height:1.5rem;font-size:1.5rem;line-height:1.5rem;color:#0097a7;position:absolute;right:.05rem;bottom:.05rem;background-color:#fff;overflow:visible;border:0 solid transparent}#add-topic{position:absolute;right:1rem;bottom:1rem}.panel-form{display:flex;flex-direction:column;padding:0}.panel-form-row{justify-content:flex-start;align-items:center}.panel-form-column,.panel-form-row{display:flex;padding:.5rem .75rem;line-height:1.5;flex-grow:0;flex-shrink:0}.panel-form-column{flex-direction:column}.panel-form-column>.panel-form-column,.panel-form-row>.panel-form-column{padding:0!important;flex-grow:1}.panel-form-column>.panel-form-row,.panel-form-row>.panel-form-row{padding:0!important}.avatar-upload{display:flex;position:relative;flex-direction:column;flex-shrink:0;width:7rem;height:9rem;margin-left:.5rem;font-size:4.5rem;padding:0}.avatar-upload .clear-avatar{position:absolute;font-size:1rem;top:0;right:0;opacity:0;background-image:radial-gradient(#fff 40%,transparent 75%)}.avatar-upload:hover .clear-avatar{opacity:1}.avatar-upload .avatar-box{position:relative;width:7rem;height:7rem}.avatar-upload .avatar-box>.material-icons{position:relative;font-size:4rem;line-height:7rem;vertical-align:middle}.avatar-upload:after{content:".";display:block;height:0;clear:both;visibility:hidden}.avatar-upload .blank{text-align:center;vertical-align:middle;border:1px dashed #999;font-size:1rem;flex-shrink:0;width:7rem;height:7rem;overflow:hidden;color:#999;line-height:7rem;border-radius:50%}.avatar-upload .preview{width:7rem;height:7rem;overflow:hidden;border-radius:50%}.avatar-upload .inputfile.hidden{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute}.avatar-upload .inputfile+label.round{display:flex;align-items:center;justify-content:center;cursor:pointer;width:3rem;height:3rem;line-height:3rem;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.4);margin-left:auto;margin-right:auto;margin-top:-1rem;bottom:0;background-color:#fafafa}.avatar-upload .inputfile:focus+label.round{outline:none}.avatar-upload .inputfile+label:hover,.avatar-upload .inputfile:focus+label{background-color:#e3f2fd;color:#42a5f5}#topic-view{position:relative}#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{position:relative;width:3rem;min-width:3rem;height:3rem;font-size:1.8rem;margin-right:.35rem}#topic-caption-panel .avatar-box>.material-icons{font-size:2.4rem;line-height:3rem}#hide-message-view{display:block;margin-right:.35rem}#topic-users{margin-left:auto;margin-right:1rem}#topic-users .avatar-box{display:inline-block;width:1.8rem;min-width:1.8rem;height:1.8rem;min-height:1.8rem;font-size:1rem;margin-right:.2rem}#messages-panel{position:relative;padding:.75rem;overflow-y:scroll;background-color:#eceff1;height:100%;background-image:url(../img/ignasi_pattern_s.png)}#messages-container{position:relative;overflow-y:hidden;height:100%}#write-only-background{position:absolute;top:0;left:0;height:100%;width:100%;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)}#write-only-note{top:50%;transform:translate(-50%,-50%);height:auto;width:auto}#peer-messaging-disabled-note,#write-only-note{position:absolute;left:50%;background-color:#fff;color:#666;line-height:2rem;text-align:center;padding:.75rem 1.25rem;border-radius:.5rem;box-shadow:0 1px .5px rgba(0,0,0,.12)}#peer-messaging-disabled-note{bottom:4.3rem;transform:translate(-50%);width:fit-content}#send-message-panel{display:flex;align-items:center;flex:none;padding:.4rem .4rem .4rem .6rem;background-color:#eceff1;box-shadow:0 -2px 3px -1px rgba(0,0,0,.1);z-index:2;height:4rem}#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;white-space:nowrap;padding-bottom:.35rem;text-align:center}.accept-invite-panel button{font-size:1rem;height:2em;line-height:2em;border:1px solid transparent;margin:.25rem;box-shadow:0 1px 2px 0 rgba(0,0,0,.25)}#dummy-view{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#e0f7fa}#dummy-view a{text-decoration:none;display:block;text-align:center;vertical-align:middle}#image-preview{position:absolute;display:flex;flex-direction:column;top:0;left:0;width:100%;height:100%;z-index:2;background-color:hsla(0,0%,100%,.9)}#image-preview-caption-panel{display:flex;justify-content:space-between;background-color:transparent;line-height:2.5rem;height:3.5rem;padding:1rem .75rem 0}#image-preview-caption-panel a{color:#757575;text-decoration:none}#image-preview-caption-panel a:hover{color:#000}#image-preview-container{margin:auto;overflow:hidden}#image-preview-footer{display:flex;justify-content:space-around;height:3.2rem;line-height:1.5rem;background-color:transparent}.chat-box{list-style:none;padding:0 0 3.5rem;margin:0 .5rem}.chat-box.group{margin-left:-.4rem}.chat-box li{display:flex;margin:0;padding:0;align-items:flex-end}.chat-box .right{justify-content:flex-end}.chat-box .bubble{display:flex;position:relative;max-width:40rem;min-width:12rem;height:auto;padding:.75rem .5rem .75rem 1.25rem;margin:0;text-align:left;border-radius:.5rem;box-shadow:0 1px .5px rgba(0,0,0,.12)}.chat-box li.single{margin-top:.25rem;margin-bottom:.75rem}.chat-box li.first{margin-top:.25rem;margin-bottom:.15rem}.chat-box li.middle{margin-top:.15rem;margin-bottom:.15rem}.chat-box li.last{margin-top:.15rem;margin-bottom:.75rem}.chat-box .left .bubble{background-color:#c5e1a5}.chat-box .right .bubble{background-color:#fafafa}.chat-box .left .tip:before{right:auto;left:-.8rem;color:#c5e1a5;border-color:transparent #c5e1a5 #c5e1a5 transparent}.chat-box .left .tip:before,.chat-box .right .tip:before{content:"";position:absolute;width:0;height:0;top:auto;bottom:0;border-style:solid;border-width:.62rem;box-shadow:0 1.6px .5px -.8px rgba(0,0,0,.12)}.chat-box .right .tip:before{display:flex;justify-content:space-between;left:auto;right:-.8rem;color:#fafafa;border-color:transparent transparent #fafafa #fafafa;border-bottom-color:inherit;border-left-color:inherit}.chat-box .avatar-box{position:relative;width:1.4rem;min-width:1.4rem;height:1.4rem;min-height:1.4rem;font-size:.8rem;margin-bottom:.8rem;margin-right:.8rem}.chat-box .bubble div.message-content{color:#212121;margin:0;max-width:36rem;overflow-wrap:break-word}.chat-box .bubble div.message-content:after{content:".";display:block;height:0;clear:both;visibility:hidden}.chat-box .timestamp{display:inline-block;position:relative;font-size:80%;color:#777;padding-left:1rem;top:.5rem;float:right;white-space:nowrap}.chat-box .typing{display:inline-block;border-radius:.5rem;width:2rem;padding:.25rem .35rem;vertical-align:middle;text-align:center;color:#aaa;margin-top:.75rem}.chat-box .author{font-size:80%;color:#777}.inline-image{max-width:36rem;max-height:24rem;overflow:hidden;border-radius:.1rem;display:block}.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{position:relative;display:flex;flex-direction:column;height:100%}#group-manager-buttons{display:flex;background-color:#eceff1;box-shadow:0 -1px rgba(0,0,0,.1);z-index:2;justify-content:space-around;padding:.4rem;height:4rem;border-left:1px solid #ccc}ul.tabbar{flex-shrink:0;flex-grow:0;background:#eee;list-style:none;margin:0;width:100%;overflow:hidden;padding:0 0 0 1rem}ul.tabbar>li{float:left}ul.tabbar>li>a{position:relative;padding-top:.75rem;padding-left:1rem;padding-right:1rem;display:block;text-align:center;line-height:2rem;font-weight:400;font-size:1.3rem;font-variant:small-caps;text-decoration:none;color:rgba(33,150,243,.6);overflow:hidden;box-shadow:inset 0 -2px 2.5px -1px rgba(0,0,0,.25)}ul.tabbar li.active>a{color:#2196f3}ul.tabbar li.active>a:after{height:.15rem;display:block;content:"";bottom:0;left:0;position:absolute;background:#2196f3;animation:tabbar-border-expand .2s cubic-bezier(.4,0,.4,1) 0s alternate forwards}@keyframes tabbar-border-expand{0%{opacity:0;width:0}to{opacity:1;width:100%}}.unread{font-weight:bolder;background-color:#0097a7;color:#fff;border-radius:50%;width:1.35rem;height:1.35rem;margin-left:.5rem;line-height:1.35rem;text-align:center;vertical-align:middle}.badge,.unread{display:inline-block;font-size:.75rem}.badge{font-family:Roboto Mono,Courier,monospace,sans-serif;border:1px solid #666;background-color:#eee;color:#666;padding:0 .15rem;margin-left:.1rem;margin-right:.1rem;margin-bottom:.1rem;border-radius:.15rem;align-self:flex-start}.badge.green{border-color:#383;background-color:#efe;color:#383}.badge.yellow{border-color:#660;background-color:#ffe;color:#660}.badge.blue{border-color:#339;background-color:#eef;color:#339}.badge.red{border-color:#933;background-color:#fee;color:#933}.badge.magenta{border-color:#939;background-color:#fef;color:#939}.lettertile{width:100%;padding-bottom:100%;border-radius:50%}.lettertile>div{display:flex;flex-shrink:0;flex-grow:0;position:absolute;top:0;bottom:0;left:0;right:0;text-transform:uppercase;align-items:center;justify-content:center;text-align:center;border-radius:50%;line-height:1;color:hsla(0,0%,98%,.8)}.lettertile:hover{color:#fff}.lettertile.color0{background-color:#ef9a9a}.lettertile.color1{background-color:#90caf9}.lettertile.color2{background-color:#b0bec5}.lettertile.color3{background-color:#b39ddb}.lettertile.color4{background-color:#ffab91}.lettertile.color5{background-color:#a5d6a7}.lettertile.color6{background-color:#eee}.lettertile.color7{background-color:#e6ee9c}.lettertile.color8{background-color:#c5e1a5}.lettertile.color9{background-color:#f0e57d}.lettertile.color10{background-color:#f48fb1}.lettertile.color11{background-color:#9fa8da}.lettertile.color12{background-color:#ffe082}.lettertile.color13{background-color:#bcaaa4}.lettertile.color14{background-color:#80deea}.lettertile.color15{background-color:#ce93d8}.lettertile.dark-color0{background-color:#c62828}.lettertile.dark-color1{background-color:#ad1457}.lettertile.dark-color2{background-color:#6a1b9a}.lettertile.dark-color3{background-color:#4527a0}.lettertile.dark-color4{background-color:#283593}.lettertile.dark-color5{background-color:#1565c0}.lettertile.dark-color6{background-color:#0277bd}.lettertile.dark-color7{background-color:#00838f}.lettertile.dark-color8{background-color:#00695c}.lettertile.dark-color9{background-color:#2e7d32}.lettertile.dark-color10{background-color:#558b2f}.lettertile.dark-color11{background-color:#9e9d24}.lettertile.dark-color12{background-color:#f9a825}.lettertile.dark-color13{background-color:#ff8f00}.lettertile.dark-color14{background-color:#ef6c00}.lettertile.dark-color15{background-color:#d84315}.material-icons{font-size:1.4rem;line-height:1;vertical-align:middle;text-align:center}.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{color:hsla(0,0%,98%,.8);background-color:silver;border-radius:50%;width:inherit;height:inherit}.chip-input{display:flex;flex-wrap:wrap;flex-grow:1;cursor:text;font-size:1.1rem;font-weight:400;background:transparent;border-bottom:1px solid #ccc;box-shadow:0 1px 0 rgba(0,0,0,.1);transition:all .1s ease-in-out;max-height:10rem;min-height:4rem;overflow-y:scroll;margin:.25rem 0;outline:none;color:#666;align-items:center;justify-content:flex-start;text-align:center}.chip-input.focused{border-bottom:1px solid #2196f3;box-shadow:0 1px 0 rgba(33,150,243,.25)}.chip-input>input[type=text]{display:inline-block;width:auto;border:none;box-shadow:none;min-width:4rem;flex:1 0 auto}.chip,.chip-input>input[type=text]{line-height:1.8;height:1.8rem;margin:.125rem}.chip{display:flex;flex:0 0 auto;align-items:center;border-radius:.9rem;background-color:#eee;white-space:nowrap;font-size:90%}.chip>a{display:inline-block;color:#ccc;background-color:#aaa;border-radius:50%;margin:.3rem;width:1.175rem;height:1.175rem;line-height:1.15;text-decoration:none}.chip>a:focus,.chip>a:hover{text-decoration:none;color:#ddd;background-color:#bbb}.chip .avatar-box{position:relative;width:1.8rem;min-width:1.8rem;height:1.8rem;min-height:1.8rem;font-size:1rem;margin-right:.2rem}.chip .avatar-box .material-icons{font-size:1.4rem;line-height:1.8rem}.chip .spacer{display:inline-block;margin:.3rem;width:.25rem;height:1.175rem}.load-spinner-box{position:absolute;box-shadow:.1rem .1rem .15rem 1px rgba(0,0,0,.25);border-radius:50%;padding:.25rem;width:2.5rem;height:2.5rem;left:0;right:0;top:5rem;margin-left:auto;margin-right:auto;background-color:#fff;z-index:2}.loader-spinner{border-radius:50%;border:.35rem solid #f3f3f3;border-top-color:#1e88e5;width:2rem;height:2rem;animation:spin 1.5s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.uploader{display:flex}.uploader>div{position:relative;height:.6rem;padding:.15rem;margin:.35rem;width:6rem;line-height:0;border-radius:.1rem;background-color:#cfd8dc}.uploader>div>span{display:inline-block;height:.3rem;background-color:#1e88e5;border-radius:.08rem} \ No newline at end of file diff --git a/src/config.js b/src/config.js index b42ccdbe..7b03ba00 100644 --- a/src/config.js +++ b/src/config.js @@ -25,6 +25,9 @@ export const MIN_TAG_LENGTH = 4; // Access mode for subscriptions initiated by the current user. export const DEFAULT_ACCESS_MODE = 'JRWPS'; +// Access mode for no access. +export const NO_ACCESS_MODE = 'N'; + // Mediaquery breakpoint between desktop and mobile, in px. Should match the value // in @media (max-size: 640px) in base.css export const MEDIA_BREAKPOINT = 640; diff --git a/src/i18n/en.json b/src/i18n/en.json index ca932c35..3bd1fc4f 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -45,6 +45,8 @@ "title_not_found": "Not found", "unnamed_topic": "Unnamed", "messages_not_readable": "no access to messages", + "peers_messaging_disabled": "Peer's messaging is disabled.", + "enable_peers_messaging": "Enable", "tabtitle_find_user": "find", "tabtitle_new_group": "new group", "tabtitle_group_by_id": "by id", diff --git a/src/i18n/ru.json b/src/i18n/ru.json index 74e6fc7f..ae657b50 100644 --- a/src/i18n/ru.json +++ b/src/i18n/ru.json @@ -129,5 +129,7 @@ "chat_invitation": "Вас пригласили начать новый чат. Как вы хотите поступить?", "chat_invitation_accept": "Принять", "chat_invitation_ignore": "Игнорировать", - "chat_invitation_block": "Заблокировать" + "chat_invitation_block": "Заблокировать", + "peers_messaging_disabled": "Чат заблокирован у корреспондента.", + "enable_peers_messaging": "Разблокировать." } diff --git a/src/messages.json b/src/messages.json index dc11c72f..7d167012 100644 --- a/src/messages.json +++ b/src/messages.json @@ -46,6 +46,8 @@ "title_not_found": "Not found", "unnamed_topic": "Unnamed", "messages_not_readable": "no access to messages", + "peers_messaging_disabled": "Peer's messaging is disabled.", + "enable_peers_messaging": "Enable", "tabtitle_find_user": "find", "tabtitle_new_group": "new group", "tabtitle_group_by_id": "by id", @@ -263,6 +265,8 @@ "chat_invitation": "Вас пригласили начать новый чат. Как вы хотите поступить?", "chat_invitation_accept": "Принять", "chat_invitation_ignore": "Игнорировать", - "chat_invitation_block": "Заблокировать" + "chat_invitation_block": "Заблокировать", + "peers_messaging_disabled": "Чат заблокирован у корреспондента.", + "enable_peers_messaging": "Разблокировать." } } diff --git a/src/views/info-view.jsx b/src/views/info-view.jsx index eaaf15c1..92a40ca7 100644 --- a/src/views/info-view.jsx +++ b/src/views/info-view.jsx @@ -15,6 +15,8 @@ import MoreButton from '../widgets/more-button.jsx'; import PermissionsEditor from '../widgets/permissions-editor.jsx'; import TagManager from '../widgets/tag-manager.jsx'; +import { NO_ACCESS_MODE } from '../config.js'; + import { makeImageUrl } from '../lib/blob-helpers.js'; import { vcard } from '../lib/utils.js'; @@ -145,6 +147,9 @@ class InfoView extends React.Component { if (user2) { newState.modeGiven2 = user2.acs.getGiven(); newState.modeWant2 = user2.acs.getWant(); + } else { + newState.modeGiven2 = NO_ACCESS_MODE; + newState.modeWant2 = NO_ACCESS_MODE; } } else { topic.subscribers((sub) => { @@ -196,7 +201,7 @@ class InfoView extends React.Component { } } - onSubsUpdated() { + onSubsUpdated(subs) { const topic = this.props.tinode.getTopic(this.props.topic); if (!topic) { return; @@ -204,7 +209,7 @@ class InfoView extends React.Component { this.resetSubs(topic, this.props); if (this.previousSubsUpdated && this.previousSubsUpdated != this.onSubsUpdated) { - this.previousSubsUpdated(); + this.previousSubsUpdated(subs); } } diff --git a/src/views/messages-view.jsx b/src/views/messages-view.jsx index 56d011b8..1bd54d9d 100644 --- a/src/views/messages-view.jsx +++ b/src/views/messages-view.jsx @@ -14,7 +14,7 @@ import LoadSpinner from '../widgets/load-spinner.jsx'; import LogoView from './logo-view.jsx'; import SendMessage from '../widgets/send-message.jsx'; -import { KEYPRESS_DELAY, MESSAGES_PAGE } from '../config.js'; +import { DEFAULT_ACCESS_MODE, KEYPRESS_DELAY, MESSAGES_PAGE } from '../config.js'; import { makeImageUrl } from '../lib/blob-helpers.js'; import { shortDateFormat } from '../lib/strformat.js'; @@ -67,6 +67,7 @@ class MessagesView extends React.Component { this.handleShowContextMenuMessage = this.handleShowContextMenuMessage.bind(this); this.handleBackNavigation = this.handleBackNavigation.bind(this); this.handleNewChatAcceptance = this.handleNewChatAcceptance.bind(this); + this.handleEnablePeer = this.handleEnablePeer.bind(this); } componentDidMount() { @@ -138,7 +139,7 @@ class MessagesView extends React.Component { }); }) .catch((err) => { - console.log('Failed subscription to', this.state.topic); + console.log("Failed subscription to", this.state.topic); this.props.onError(err.message, 'err'); const blankState = MessagesView.getDerivedStateFromProps({}, {}); blankState.title = this.props.intl.formatMessage(messages.not_found); @@ -160,7 +161,8 @@ class MessagesView extends React.Component { imagePreview: null, typingIndicator: false, scrollPosition: 0, - fetchingMessages: false + fetchingMessages: false, + peerMessagingDisabled: false }; } else if (nextProps.topic != prevState.topic) { const topic = nextProps.tinode.getTopic(nextProps.topic); @@ -191,29 +193,37 @@ class MessagesView extends React.Component { } }); - nextState = Object.assign(nextState, { + Object.assign(nextState, { messages: msgs, onlineSubs: subs }); if (topic.public) { - nextState = Object.assign(nextState, { + Object.assign(nextState, { title: topic.public.fn, avatar: makeImageUrl(topic.public.photo) }); } else { - nextState = Object.assign(nextState, { + Object.assign(nextState, { title: '', avatar: null }); } + + const peer = topic.p2pPeerDesc(); + if (peer && peer.acs) { + Object.assign(nextState, { + peerMessagingDisabled: !(peer.acs.isReader() && peer.acs.isWriter()) + }); + } } else { // Invalid topic. - nextState = Object.assign(nextState, { + Object.assign(nextState, { messages: [], onlineSubs: [], title: '', - avatar: null + avatar: null, + peerMessagingDisabled: false }); } } @@ -286,9 +296,9 @@ class MessagesView extends React.Component { this.setState({scrollPosition: event.target.scrollHeight - event.target.scrollTop}); if (event.target.scrollTop <= 0) { this.setState((prevState, props) => { - let newState = {}; + const newState = {}; if (!prevState.fetchingMessages) { - let topic = this.props.tinode.getTopic(this.state.topic); + const topic = this.props.tinode.getTopic(this.state.topic); if (topic && topic.isSubscribed() && topic.msgHasMoreMessages()) { newState.fetchingMessages = true; topic.getMessagesPage(MESSAGES_PAGE).catch((err) => { @@ -327,21 +337,28 @@ class MessagesView extends React.Component { handleSubsUpdated() { if (this.state.topic) { - var subs = []; - var topic = this.props.tinode.getTopic(this.state.topic); + const subs = []; + const topic = this.props.tinode.getTopic(this.state.topic); topic.subscribers((sub) => { if (sub.online && sub.user != this.props.myUserId) { subs.push(sub); } }); - this.setState({onlineSubs: subs}); + const newState = {onlineSubs: subs}; + const peer = topic.p2pPeerDesc(); + if (peer && peer.acs) { + Object.assign(newState, { + peerMessagingDisabled: !(peer.acs.isReader() && peer.acs.isWriter()) + }); + } + this.setState(newState); } } handleNewMessage(msg) { // Regenerate messages list - var topic = this.props.tinode.getTopic(this.state.topic); - var newState = {messages: []}; + const topic = this.props.tinode.getTopic(this.state.topic); + const newState = {messages: []}; topic.messages(function(m) { if (!m.deleted) { newState.messages = newState.messages.concat(m); @@ -410,7 +427,7 @@ class MessagesView extends React.Component { this.props.sendMessage(Drafty.attachJSON(Drafty.parse(text), data)); } else if (action == 'url') { const url = new URL(data.ref); - let params = url.searchParams; + const params = url.searchParams; for (let key in data.resp) { if (data.resp.hasOwnProperty(key)) { params.set(key, data.resp[key]); @@ -456,6 +473,10 @@ class MessagesView extends React.Component { this.props.onNewChat(this.state.topic, action); } + handleEnablePeer() { + this.props.onChangePermissions(this.state.topic, DEFAULT_ACCESS_MODE, this.state.topic); + } + render() { const {formatMessage} = this.props.intl; @@ -520,7 +541,7 @@ class MessagesView extends React.Component { } let lastSeen = null; - let cont = this.props.tinode.getMeTopic().getContact(this.state.topic); + const cont = this.props.tinode.getMeTopic().getContact(this.state.topic); if (cont && Tinode.topicType(cont.topic) == 'p2p') { if (cont.online) { lastSeen = formatMessage(messages.online_now); @@ -530,8 +551,8 @@ class MessagesView extends React.Component { // TODO: also handle user agent in c.seen.ua } } - let avatar = this.state.avatar || true; - let online = this.props.online ? 'online' + (this.state.typingIndicator ? ' typing' : '') : 'offline'; + const avatar = this.state.avatar || true; + const online = this.props.online ? 'online' + (this.state.typingIndicator ? ' typing' : '') : 'offline'; component = (
@@ -592,6 +613,14 @@ class MessagesView extends React.Component {
: null } + {this.state.peerMessagingDisabled && !this.state.unconfirmed ? +
+ block . +
: null} {this.state.unconfirmed ? : @@ -600,8 +629,7 @@ class MessagesView extends React.Component { topic={this.props.topic} disabled={!this.state.isWriter} sendMessage={this.props.sendMessage} - onError={this.props.onError} /> - } + onError={this.props.onError} />} {this.state.imagePreview ? : null} diff --git a/src/views/tinode-web.jsx b/src/views/tinode-web.jsx index b64311cb..4ff3f09a 100644 --- a/src/views/tinode-web.jsx +++ b/src/views/tinode-web.jsx @@ -764,7 +764,6 @@ class TinodeWeb extends React.Component { response = topic.delTopic(); break; case 'block': - console.log("Blocking..."); // Ban the topic making futher invites impossible. // Just self-ban. const am = topic.getAccessMode().updateWant('-JP').getWant(); @@ -1299,6 +1298,7 @@ class TinodeWeb extends React.Component { onNewTopicCreated={this.handleNewTopicCreated} readTimerHandler={this.handleReadTimer} showContextMenu={this.handleShowContextMenu} + onChangePermissions={this.handleChangePermissions} onNewChat={this.handleNewChatInvitation} sendMessage={this.handleSendMessage} /> diff --git a/src/widgets/more-button.jsx b/src/widgets/more-button.jsx index 38668f0d..7e0529e3 100644 --- a/src/widgets/more-button.jsx +++ b/src/widgets/more-button.jsx @@ -13,7 +13,7 @@ export default class MoreButton extends React.PureComponent { } handleToggle() { - let open = !this.state.open; + const open = !this.state.open; this.setState({open: open}); if (this.props.onToggle) { this.props.onToggle(open); @@ -21,7 +21,7 @@ export default class MoreButton extends React.PureComponent { } render() { - return (