a big more of manual merging

css/base.css

@@ -20,6 +20,7 @@ html, body {
 
 tt {
   font-family: 'Roboto Mono', Courier, monospace;
+  white-space: nowrap;
 }
 
 a {
@@ -248,6 +249,11 @@ textarea {
   resize: none;
   padding-top: 0.45rem;
 }
+
+textarea.inplace-edit {
+  height: unset;
+}
+
 /* END of input and buttons */
 
 /* BEGIN scrollbar styling.  */
@@ -326,6 +332,10 @@ li:hover .menuTrigger a {
   color: #757575;
 }
 
+ul.contact-box .menuTrigger {
+  background-image: radial-gradient(#eceff1 40%, transparent 75%);
+}
+
 li.left:hover .menuTrigger {
   background-image: radial-gradient(#c5e1a5 40%, transparent 75%);
 }
@@ -333,6 +343,10 @@ li.right:hover .menuTrigger {
   background-image: radial-gradient(#fafafa 40%, transparent 75%);
 }
 
+li.selected .menuTrigger {
+  background-image: radial-gradient(#cfd8dc 40%, transparent 75%);
+}
+
 /* END popup/dropdown menu */
 
 /* Begin Alert: modal window with message and buttons. */
@@ -368,9 +382,27 @@ div.alert .content {
 }
 /* END Alert */
 
+/* BEGIN trusted badges with legend */
+div.trusted-badge {
+  margin: 0.25rem 0;
+}
+/* END trusted badges */
+
 /* Generic text colors */
 .blue {
-  color: #2196f3; /* blue 500 */
+  color: #2196f3!important; /* blue 500 */
+}
+
+.verified-color {
+  color: #03A9F4!important; /* lt-blue 500 */
+}
+
+.staff-color {
+  color: #689f38!important; /* light green 700 */
+}
+
+.danger-color {
+  color: #FFC107!important; /* amber 500 */
 }
 
 .green {
@@ -378,19 +410,20 @@ div.alert .content {
 }
 
 .red {
-  color: #D32F2F; /* red 700 */
+  color: #D32F2F!important; /* red 700 */
 }
 
-.amber {
+/* Color of an inverted icon badges */
-  color: #FFC107; /* amber 500 */
+.badge-inv {
+  color: #fffd!important;
 }
 
 .gray {
-  color: #757575;
+  color: #757575!important;
 }
 
 .light-gray {
-  color: #bbb;
+  color: #bbb!important;
 }
 
 .large {
@@ -402,8 +435,8 @@ div.alert .content {
 }
 
 .float-right {
-  margin-left: auto;
+  position: absolute;
-  float: right;
+  right: 0.5rem;
 }
 
 .hr {
@@ -420,6 +453,12 @@ div.alert .content {
   height: 0.015rem;
 }
 
+.ellipsized {
+  overflow-x: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 /* Element which can take focus but shows no outline */
 .group-focus {
   outline: none;
@@ -566,30 +605,39 @@ div.alert .content {
 .in-place-edit {
   display: inline-block;
   font-family: inherit;
-  font-size: 1.1rem;
+  font-size: 1rem;
-  height: 2.5rem;
+  margin: 0.25rem 0.125rem 0 0.125rem;
-  line-height: 2.25;
-  margin: 0.25rem 0.125rem;
   width: 100%;
   vertical-align: baseline;
   border-bottom: 1px dashed #ddd;
   cursor: pointer;
 }
 
+.in-place-edit.short {
+  font-size: 1.1rem;
+  height: 2.5rem;
+  line-height: 2.25;
+}
+
 .in-place-edit.disabled {
   border-bottom: none;
   cursor: default;
+  color: #888;
 }
 
 .in-place-edit.placeholder {
   color: #bbb;
 }
 
-.in-place-edit .content {
+.in-place-edit span {
+  display: inline-block;
+}
+
+.in-place-edit.short span {
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
-  overflow: hidden
+  overflow-x: hidden;
 }
 /* END of InPlaceEdit styles */
 
@@ -609,8 +657,8 @@ table.permission-editor td.checkbox {
 }
 
 .permission-editor .material-icons {
-  font-size: 1.1rem;
+  font-size: 1.3rem;
-  line-height: 1.1rem;
+  line-height: 1.3rem;
 }
 
 .material-icons.clickable {
@@ -814,7 +862,7 @@ i.search {
   display: flex;
   flex-direction: column;
   height: 100%;
-  overflow: hidden;
+  overflow-x: hidden;
 }
 
 .flex-column.narrow {
@@ -822,6 +870,7 @@ i.search {
 }
 
 .scrollable-panel {
+  overflow-x: hidden;
   overflow-y: auto;
   margin-top: 0.25rem;
   margin-bottom: auto;
@@ -845,6 +894,12 @@ i.search {
   background: linear-gradient(to right, transparent 3.5rem, #eee 1px, #eee 100%) 0 100% / 100% 1px no-repeat, #fff;
   overflow-x: hidden;
 }
+
+.contact-box.small > li {
+  padding: 0.25rem 0.25rem 0.35rem 0.35rem;
+  min-height: 2.5rem;
+}
+
 .contact-box > li:last-child {
   /* remove border from the last contact */
   background: #fff;
@@ -867,12 +922,13 @@ i.search {
 .contact-box .contact-title {
   font-size: 1.05rem;
   text-overflow: ellipsis;
-  overflow: hidden
+  overflow-x: hidden;
+  white-space: nowrap;
 }
 
 .contact-box .contact-comment {
   text-overflow: ellipsis;
-  overflow: hidden;
+  overflow-x: hidden;
   white-space: nowrap;
   font-weight: lighter;
 }
@@ -902,6 +958,19 @@ i.search {
   height: 3rem;
   border-radius: 50%;
 }
+
+.contact-box.small .avatar-box {
+  width: 2rem;
+  min-width: 2rem;
+  height: 2rem;
+  min-height: 2rem;
+  font-size: 1.2rem;
+}
+.contact-box.small .avatar {
+  width: 2rem;
+  height: 2rem;
+}
+
 .contact-box .avatar-box > .material-icons {
   display: flex;
   flex-direction: column;
@@ -909,11 +978,20 @@ i.search {
   font-size: 2.4rem;
   line-height: 3rem;
 }
+.contact-box.small .avatar-box > .material-icons {
+  font-size: 1.6rem;
+  line-height: 2rem;
+}
 .contact-box .text-box {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
 }
+.contact-box .text-box > div {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
 
 .contact-box .action-text {
   text-align: center;
@@ -923,11 +1001,19 @@ i.search {
   cursor: pointer;
 }
 
-.contact-box img.channel {
+img.channel {
   width: 1rem;
   height: 1rem;
   vertical-align: middle;
   margin-left: 0.3rem;
+  margin-bottom: 0.1rem;
+}
+
+.large img.channel {
+  width: 1.35rem;
+  height: 1.35rem;
+  margin-left: 0.5rem;
+  margin-bottom: 0.15rem;
 }
 
 /* Online-offline indicator positioned inside avatar-box */
@@ -986,12 +1072,14 @@ i.search {
 /* Various forms inside a panel (signup form, new topic form) */
 .panel-form {
   display: flex;
+  position: relative;
   flex-direction: column;
   padding: 0;
 }
 
 .panel-form-row {
   display: flex;
+  position: relative;
   align-items: center;
   padding: 0.5rem 0.75rem;
   line-height: 1.5;
@@ -1001,15 +1089,15 @@ i.search {
 
 .panel-form-column {
   display: flex;
+  position: relative;
   flex-direction: column;
   flex-grow: 0;
-  flex-shrink: 0;
   padding: 0.5rem 0.75rem;
   line-height: 1.5;
+  overflow-x: hidden;
 }
 
-/* Make sure padding is only applied at
+/* Make sure padding is only applied at the top level panel */
-   the top level panel */
 .panel-form-row > .panel-form-column,
 .panel-form-column > .panel-form-column {
   padding: 0!important;
@@ -1020,15 +1108,19 @@ i.search {
   padding: 0!important;
 }
 
+.panel-form-column > .group {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
 /* Styling of avatar upload control */
 .avatar-upload {
   position: relative;
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
-  width: 7rem;
+  width: 10rem;
-  height: 9rem;
+  height: 10.5rem;
-  margin-left: 0.5rem;
   font-size: 4.5rem;
   padding: 0;
 }
@@ -1052,14 +1144,14 @@ i.search {
 
 .avatar-upload .avatar-box {
   position: relative;
-  width: 7rem;
+  width: 10rem;
-  height: 7rem;
+  height: 10rem;
 }
 
 .avatar-upload .avatar-box > .material-icons {
   position: relative;
   font-size: 4rem;
-  line-height: 7rem;
+  line-height: 10rem;
   vertical-align: middle;
 }
 
@@ -1078,21 +1170,37 @@ i.search {
   border: 1px dashed #999;
   font-size: 1rem;
   flex-shrink: 0;
-  width: 7rem;
+  width: 10rem;
-  height: 7rem;
+  height: 10rem;
   overflow: hidden;
   color: #999;
-  line-height: 7rem;
+  line-height: 10rem;
   border-radius: 50%;
 }
 
-.avatar-upload .preview {
+.avatar-upload img.preview {
-  width: 7rem;
+  width: 10rem;
-  height: 7rem;
+  height: 10rem;
   overflow: hidden;
   border-radius: 50%;
 }
 
+.avatar-upload img.preview::before {
+  position: absolute;
+  content: " ";
+  display: flex;
+  font-size: 0.9rem;
+  font-weight: lighter;
+  color: #666;
+  top: 0;
+  left: 0;
+  width: 10rem;
+  height: 10rem;
+  justify-content: center;
+  background: center no-repeat url("../img/broken_image.png");
+  border-radius: 50%;
+}
+
 .avatar-upload .inputfile.hidden {
   width: 0.1px;
   height: 0.1px;
@@ -1103,6 +1211,7 @@ i.search {
 
 .avatar-upload .inputfile + label.round {
   display: flex;
+  position: absolute;
   align-items: center;
   justify-content: center;
   cursor: pointer;
@@ -1111,11 +1220,10 @@ i.search {
   line-height: 3rem;
   border-radius: 50%;
   box-shadow: 0 1px 4px rgba(0,0,0,0.4);
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: -1rem;
   bottom: 0;
+  right: 0;
   background-color: #fafafa;
+  z-index: 1;
 }
 
 .avatar-upload .inputfile:focus + label.round {
@@ -1604,7 +1712,7 @@ img.inline-image::before {
 
 img.image-preview::before {
   content: " ";
-  background-size: 8rem 8rem;
+  background-size: 10rem 10rem;
 }
 
 /* Attachment styles */
@@ -1771,7 +1879,7 @@ ul.tabbar li.active > a {
 }
 
 .badge.green {
-  border-color: #9c9;
+  border-color: #aca;
   background-color: #efe;
   color: #383;
 }
@@ -1783,7 +1891,7 @@ ul.tabbar li.active > a {
 }
 
 .badge.blue {
-  border-color: #99c;
+  border-color: #aad;
   background-color: #eef;
   color: #339;
 }
@@ -1828,105 +1936,204 @@ ul.tabbar li.active > a {
 }
 
 /* Colors of letter tiles */
-.light-color0 {
+.lt-bg-0 {
   background-color: #ef9a9a;
 }
-.light-color1 {
+.lt-bg-1 {
   background-color: #90caf9;
 }
-.light-color2 {
+.lt-bg-2 {
   background-color: #b0bec5;
 }
-.light-color3 {
+.lt-bg-3 {
   background-color: #b39ddb;
 }
-.light-color4 {
+.lt-bg-4 {
   background-color: #ffab91;
 }
-.light-color5 {
+.lt-bg-5 {
   background-color: #a5d6a7;
 }
-.light-color6 {
+.lt-bg-6 {
   background-color: #eeeeee;
 }
-.light-color7 {
+.lt-bg-7 {
   background-color: #e6ee9c;
 }
-.light-color8 {
+.lt-bg-8 {
   background-color: #c5e1a5;
 }
-.light-color9 {
+.lt-bg-9 {
   background-color: #f0e57d;
 }
-.light-color10 {
+.lt-bg-10 {
   background-color: #f48fb1;
 }
-.light-color11 {
+.lt-bg-11 {
   background-color: #9fa8da;
 }
-.light-color12 {
+.lt-bg-12 {
   background-color: #ffe082;
 }
-.light-color13 {
+.lt-bg-13 {
   background-color: #bcaaa4;
 }
-.light-color14 {
+.lt-bg-14 {
   background-color: #80deea;
 }
-.light-color15 {
+.lt-bg-15 {
   background-color: #ce93d8;
 }
 
 /* Darker version of letter tile colors */
-.dark-color0 {
+.dk-bg-0 {
   background-color: #C62828;
 }
-.dark-color1 {
+.dk-bg-1 {
   background-color: #AD1457;
 }
-.dark-color2 {
+.dk-bg-2 {
   background-color: #6A1B9A;
 }
-.dark-color3 {
+.dk-bg-3 {
   background-color: #4527A0;
 }
-.dark-color4 {
+.dk-bg-4 {
   background-color: #283593;
 }
-.dark-color5 {
+.dk-bg-5 {
   background-color: #1565C0;
 }
-.dark-color6 {
+.dk-bg-6 {
   background-color: #0277BD;
 }
-.dark-color7 {
+.dk-bg-7 {
   background-color: #00838F;
 }
-.dark-color8 {
+.dk-bg-8 {
   background-color: #00695C;
 }
-.dark-color9 {
+.dk-bg-9 {
   background-color: #2E7D32;
 }
-.dark-color10 {
+.dk-bg-10 {
   background-color: #558B2F;
 }
-.dark-color11 {
+.dk-bg-11 {
   background-color: #9E9D24;
 }
-.dark-color12 {
+.dk-bg-12 {
   background-color: #F9A825;
 }
-.dark-color13 {
+.dk-bg-13 {
   background-color: #FF8F00;
 }
-.dark-color14 {
+.dk-bg-14 {
   background-color: #EF6C00;
 }
-.dark-color15 {
+.dk-bg-15 {
   background-color: #D84315;
 }
 
+/* Same colors as above but for text as opposite to background */
+.lt-fg-0 {
+  color: #ef9a9a!important;
+}
+.lt-fg-1 {
+  color: #90caf9!important;
+}
+.lt-fg-2 {
+  color: #b0bec5!important;
+}
+.lt-fg-3 {
+  color: #b39ddb!important;
+}
+.lt-fg-4 {
+  color: #ffab91!important;
+}
+.lt-fg-5 {
+  color: #a5d6a7!important;
+}
+.lt-fg-6 {
+  color: #eeeeee!important;
+}
+.lt-fg-7 {
+  color: #e6ee9c!important;
+}
+.lt-fg-8 {
+  color: #c5e1a5!important;
+}
+.lt-fg-9 {
+  color: #f0e57d!important;
+}
+.lt-fg-10 {
+  color: #f48fb1!important;
+}
+.lt-fg-11 {
+  color: #9fa8da!important;
+}
+.lt-fg-12 {
+  color: #ffe082!important;
+}
+.lt-fg-13 {
+  color: #bcaaa4!important;
+}
+.lt-fg-14 {
+  color: #80deea!important;
+}
+.lt-fg-15 {
+  color: #ce93d8!important;
+}
+
+.dk-fg-0 {
+  color: #C62828!important;
+}
+.dk-fg-1 {
+  color: #AD1457!important;
+}
+.dk-fg-2 {
+  color: #6A1B9A!important;
+}
+.dk-fg-3 {
+  color: #4527A0!important;
+}
+.dk-fg-4 {
+  color: #283593!important;
+}
+.dk-fg-5 {
+  color: #1565C0!important;
+}
+.dk-fg-6 {
+  color: #0277BD!important;
+}
+.dk-fg-7 {
+  color: #00838F!important;
+}
+.dk-fg-8 {
+  color: #00695C!important;
+}
+.dk-fg-9 {
+  color: #2E7D32!important;
+}
+.dk-fg-10 {
+  color: #558B2F!important;
+}
+.dk-fg-11 {
+  color: #9E9D24!important;
+}
+.dk-fg-12 {
+  color: #F9A825!important;
+}
+.dk-fg-13 {
+  color: #FF8F00!important;
+}
+.dk-fg-14 {
+  color: #EF6C00!important;
+}
+.dk-fg-15 {
+  color: #D84315!important;
+}
+
 /* Material icons resized from the default 24pt */
 .material-icons {
   font-size: 1.4rem;
@@ -2005,6 +2212,15 @@ ul.tabbar li.active > a {
   background-color: #eee;
   white-space: nowrap;
   font-size: 90%;
+  max-width: 12rem;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+}
+
+.chip > span {
+  white-space: nowrap;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
 }
 
 .chip.invalid {
@@ -2019,6 +2235,7 @@ ul.tabbar li.active > a {
   border-radius: 50%;
   margin: 0.3rem;
   width: 1.175rem;
+  min-width: 1.175rem;
   height: 1.175rem;
   line-height: 1.15;
   text-decoration: none;
@@ -2054,12 +2271,14 @@ ul.tabbar li.active > a {
 }
 
 .load-spinner-box {
+  --size-small: 2.5rem;
+  --size-large: 4rem;
   position: absolute;
   box-shadow: 0.1rem 0.1rem 0.15rem 1px rgba(0,0,0,0.25);
   border-radius: 50%;
   padding: 0.25rem;
-  width: 2.5rem;
+  width: var(--size-small);
-  height: 2.5rem;
+  height: var(--size-small);
   left: 0;
   right: 0;
   top: 5rem;
@@ -2069,6 +2288,25 @@ ul.tabbar li.active > a {
   z-index: 2;
 }
 
+.load-spinner-box.large {
+  width: var(--size-large);
+  height: var(--size-large);
+}
+
+.load-spinner-box.clear {
+  -x-box-shadow: none;
+  box-shadow: 0.1rem 0.1rem 0.15rem 1px rgba(0,0,0,0.12);
+  background-color: #fff8;
+}
+
+.load-spinner-box.centered {
+  top: calc(var(--size-small)/2 - 0.25rem);
+}
+
+.load-spinner-box.large.centered {
+  top: calc(var(--size-large)/2 - 0.25rem);
+}
+
 .loader-spinner {
   border: 0.35rem solid #f3f3f3;
   border-radius: 50%;
@@ -2078,6 +2316,11 @@ ul.tabbar li.active > a {
   animation: spin 1.5s linear infinite;
 }
 
+.load-spinner-box.large .loader-spinner {
+  width: 3.5rem;
+  height: 3.5rem;
+}
+
 @keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
@@ -2116,3 +2359,77 @@ ul.tabbar li.active > a {
   color: #5f9ea0;
   font-weight: inherit;
 }
+
+/* Image cropping widget */
+
+.cropper {
+  position: relative;
+  width: 18rem;
+  height: 21rem;
+  margin: auto;
+  margin-top: 1rem;
+  align-self: center;
+  transform: translateZ(0);
+  border-radius: 0.25rem;
+}
+
+.cropper .bounding-box {
+  position: relative;
+  width: 18rem;
+  height: 18rem;
+  overflow: hidden;
+  z-index: 1;
+  border-radius: 0.25rem;
+  border: solid 2px #1e88e5;
+  box-shadow: 1px 1px 3px grey;
+  background-color: #999;
+}
+
+.cropper .preview {
+  position: absolute;
+  max-height: none;
+  max-width: none;
+  z-index: -1;
+}
+
+.cropper .cutout {
+  position: absolute;
+  width: 17rem;
+  height: 17rem;
+  border: 1px dashed #999;
+  margin: auto;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  box-shadow: 0 0 150rem 150rem rgb(230 246 255 / 66%);
+  z-index: 0;
+}
+
+.cropper .cutout.circle {
+  border-radius: 50%;
+}
+
+.cropper .overlay {
+  position: absolute;
+  cursor: move;
+  touch-action: none;
+  z-index: 1;
+}
+
+.cropper .zoom-wrapper {
+  height: 2rem;
+  width: 80%;
+  margin: 1rem auto;
+  text-align: center;
+}
+
+.cropper .zoom {
+  box-shadow: none;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.cropper .zoom:focus {
+  outline: none;
+}