public/js/views/app/headerView.less

   1 @import (reference) 'base-zindex-levels';
   2 @import (reference) 'colors.less';
   3 @import (reference) 'trp3Vars.less';
   4 @import (reference) 'trpButtons.less';
   5
   6 @import '../controls/dropdown';
   7
   8 @chat-header-heading-font-size: 24px;
   9 @chat-header-heading-line-height: 40px;
  10 @chat-header-topic-font-size: 1em;
  11 @chat-header-topic-line-height: 25px;
  12 @chat-header-topic-color: white;
  13
  14 // The space above the chat header
  15 @chat-header-space-to-heading: (
  16     @chat-frame-desktop-header-height - @chat-header-heading-line-height
  17   ) / 2;
  18 // The difference between line-height and font-size bounds
  19 @chat-header-font-vertical-padding: (
  20     @chat-header-heading-line-height - @chat-header-heading-font-size
  21   ) / 2;
  22 // The extra amount needed to align the topic to the baseline of the heading
  23 @vert-diff-baseline-offset-between-header-and-topic: @chat-header-font-vertical-padding ~'+' @chat-header-heading-font-size
  24   ~'-' @chat-header-topic-line-height;
  25 // Actual margin value to align the topic to the baseline of the heading
  26 // Extra `.125` is for account for desenders to match baseline
  27 // This needs to be split out of the calc so we can re-use it in a calc
  28 @topic-margin-calc-value: @chat-header-space-to-heading ~'+' @vert-diff-baseline-offset-between-header-and-topic
  29   ~'+' 0.125em;
  30 @topic-margin-top: calc(@topic-margin-calc-value);
  31 @topic-margin-bottom: calc(~'(' @topic-margin-calc-value ~')' ~'/' 2);
  32
  33 .chat-header {
  34   box-sizing: border-box;
  35   position: absolute;
  36   display: flex;
  37   width: 100%;
  38   background-image: linear-gradient(to left, @header-grad-bg-color, @header-base-bg-color);
  39   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  40   z-index: @zIndexChatHeader;
  41
  42   @media @large-screen-breakpoint {
  43     padding-left: @desktop-menu-left-padding;
  44   }
  45 }
  46
  47 .chat-header-inner {
  48   flex: 1;
  49   display: flex;
  50   align-items: flex-start;
  51   width: 100%;
  52   max-width: 100%;
  53 }
  54
  55 .chat-header__main-grouping {
  56   display: flex;
  57   align-items: center;
  58   // header can expand to fit long room topics/descriptions when hovered over
  59   height: @chat-frame-desktop-header-height;
  60 }
  61
  62 .chat-header__info-grouping {
  63   .chat-header__main-grouping();
  64   overflow: hidden;
  65   flex: 1;
  66   flex-wrap: wrap;
  67   align-items: flex-start;
  68   height: auto;
  69   max-height: @chat-frame-desktop-header-height;
  70
  71   transition: max-height 0.3s ease;
  72
  73   &:hover,
  74   &:focus {
  75     // plenty of room to auto expand into
  76     max-height: 100vh;
  77   }
  78 }
  79
  80 .chat-header__heading-sub-group {
  81   flex-shrink: 0;
  82   display: flex;
  83   align-items: center;
  84 }
  85
  86 .chat-header__heading {
  87   box-sizing: border-box;
  88   max-width: 100%;
  89   margin-top: (@chat-frame-desktop-header-height - @chat-header-heading-line-height) / 2;
  90   margin-bottom: 0;
  91   padding-right: 2rem;
  92
  93   white-space: nowrap;
  94 }
  95
  96 .chat-header__title {
  97   overflow: hidden;
  98   display: inline-block;
  99   max-width: 100%;
 100
 101   color: white;
 102   font-size: @chat-header-heading-font-size;
 103   line-height: @chat-header-heading-line-height;
 104   font-weight: 300;
 105   text-overflow: ellipsis;
 106
 107   &:hover {
 108     text-decoration: none;
 109   }
 110 }
 111
 112 .chat-header__topic-sub-group {
 113   overflow: hidden;
 114   position: relative;
 115   flex-basis: 30rem;
 116   flex-grow: 1;
 117
 118   &:focus {
 119     outline: none;
 120   }
 121 }
 122
 123 .chat-header__topic-wrapper {
 124   box-sizing: border-box;
 125   display: flex;
 126   max-width: 100%;
 127
 128   padding-right: 2em;
 129   color: fade(@chat-header-topic-color, 0);
 130   white-space: nowrap;
 131
 132   transition: color 0.2s ease;
 133
 134   &.is-editing {
 135     width: 100%;
 136   }
 137
 138   /* Handle the edit icon */
 139   &.is-admin {
 140     cursor: pointer;
 141
 142     &:after {
 143       /* Pencil icon */
 144       content: '\e81a';
 145       margin-top: @topic-margin-top;
 146       margin-left: 1em;
 147       color: inherit;
 148       opacity: 0.6;
 149       font-family: 'fontello';
 150     }
 151
 152     &.is-new-room,
 153     .chat-header__info-grouping:hover &,
 154     .chat-header__info-grouping:focus & {
 155       color: @chat-header-topic-color;
 156     }
 157   }
 158 }
 159
 160 .chat-header__topic {
 161   box-sizing: border-box;
 162   overflow: hidden;
 163   display: inline-block;
 164   vertical-align: baseline;
 165   // max height to allow height animations
 166   max-height: @chat-header-topic-line-height;
 167   margin: 0;
 168   // For the italic overflow
 169   padding-right: 0.25rem;
 170
 171   color: white;
 172   opacity: 0.8;
 173   font-size: @chat-header-topic-font-size;
 174   line-height: @chat-header-topic-line-height;
 175   text-overflow: ellipsis;
 176   white-space: nowrap;
 177
 178   transition: max-height 0.3s ease-in-out;
 179
 180   &:not(:empty) {
 181     margin-top: @topic-margin-top;
 182     margin-bottom: @topic-margin-bottom;
 183   }
 184
 185   /* Handle the placeholder description */
 186   &.is-admin {
 187     cursor: pointer;
 188
 189     &:empty {
 190       margin-top: @topic-margin-top;
 191       margin-bottom: @topic-margin-bottom;
 192       color: inherit;
 193
 194       &:before {
 195         content: 'Double-click here to enter a description for your room.';
 196         font-style: italic;
 197       }
 198     }
 199   }
 200
 201   &.is-editing {
 202     width: 100%;
 203   }
 204
 205   .chat-header__info-grouping:hover &,
 206   .chat-header__info-grouping:focus & {
 207     // plenty of room to auto expand into
 208     max-height: 100vh;
 209
 210     white-space: normal;
 211     word-wrap: break-word;
 212   }
 213
 214   & .topic-input {
 215     box-sizing: border-box;
 216     width: 100%;
 217     height: 20px;
 218     margin-bottom: 0px;
 219     padding: 1px 2px;
 220     resize: none;
 221   }
 222 }
 223
 224 .chat-header__topic a {
 225   color: white;
 226 }
 227
 228 .chat-header__content h1 .octicon-lock:before {
 229   font-size: 16px;
 230   position: relative;
 231   top: -3px;
 232   left: 5px;
 233   color: #666;
 234 }
 235
 236 .chat-header__content .icon-lock {
 237   font-size: 16px;
 238 }
 239
 240 .chat-header__permission-icon,
 241 .chat-header__title {
 242   vertical-align: middle;
 243 }
 244
 245 .chat-header__permission-icon {
 246   color: white;
 247   opacity: 0.6;
 248 }
 249
 250 .chat-header__action-grouping {
 251   align-items: stretch;
 252 }
 253
 254 .chat-header__org-page,
 255 .chat-header__favourite,
 256 .chat-header__settings,
 257 .chat-header__left-menu-toggle {
 258   body.embedded & {
 259     visibility: hidden;
 260   }
 261
 262   box-sizing: content-box;
 263   display: inline-block;
 264   display: flex;
 265   justify-content: center;
 266   align-items: center;
 267   margin-left: 2px;
 268   padding: 0;
 269
 270   background-color: transparent;
 271   border: none;
 272
 273   font-size: 26px;
 274   line-height: 1;
 275   color: white;
 276   text-align: center;
 277   cursor: pointer;
 278
 279   transition: background-color 0.2s ease-in-out, color 0.1s ease;
 280
 281   &:hover,
 282   &:focus {
 283     color: rgba(255, 255, 255, 0.6);
 284     outline: none;
 285
 286     & > .chat-header__action-icon {
 287       background-color: rgba(0, 0, 0, 0.1);
 288     }
 289   }
 290 }
 291
 292 .chat-header__action-icon {
 293   color: currentColor;
 294   stroke: currentColor;
 295   &:before {
 296     color: currentColor;
 297     margin-left: 0;
 298     margin-right: 0;
 299   }
 300 }
 301
 302 .chat-header__action-icon {
 303   color: inherit;
 304
 305   transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
 306
 307   // Spacing that doesn't affect width
 308   border-width: 4px 6px;
 309   border-style: solid;
 310   border-color: transparent;
 311   border-radius: 3px;
 312 }
 313
 314 .chat-header__action-icon-svg--settings {
 315   width: 2.7rem;
 316 }
 317
 318 .chat-header__action-matrix-icon {
 319   width: 2.6rem;
 320   height: 2.6rem;
 321 }
 322
 323 .chat-header__org-page {
 324   @media (max-width: 650px) {
 325     display: none;
 326   }
 327
 328   .chat-header__action-icon {
 329     /* To make the icon equal with the other font-icons */
 330     margin-left: 0.18em;
 331     margin-right: 0.18em;
 332   }
 333 }
 334
 335 .chat-header__favourite {
 336   @media (max-width: 650px) {
 337     display: none;
 338   }
 339
 340   &.favourite {
 341     color: @trpYellow;
 342   }
 343 }
 344
 345 .chat-header__left-menu-toggle-grouping {
 346   @media @large-screen-breakpoint {
 347     display: none;
 348   }
 349 }
 350
 351 .chat-header__left-menu-toggle {
 352   display: flex;
 353   align-items: center;
 354   height: 100%;
 355   padding-left: 20px;
 356   padding-right: 20px;
 357
 358   background: 0;
 359   border: 0;
 360
 361   line-height: 0;
 362
 363   & > svg {
 364     width: 26px;
 365     stroke-width: 2px;
 366     vector-effect: non-scaling-stroke;
 367   }
 368 }
 369
 370 .chat-header__avatar-grouping {
 371   flex-shrink: 0;
 372   padding-right: 18px;
 373 }
 374
 375 .chat-header__avatar {
 376   @side: 38px;
 377
 378   position: relative;
 379   box-sizing: border-box;
 380   height: @side;
 381   user-select: none;
 382
 383   img {
 384     width: 100%;
 385     height: 100%;
 386
 387     border-radius: 4px;
 388   }
 389 }
 390
 391 .chat-header__group-avatar-upload-input {
 392   display: none;
 393 }
 394
 395 .chat-header__group-avatar-upload-label {
 396   display: block;
 397   margin-bottom: 0;
 398   cursor: pointer;
 399   box-sizing: border-box;
 400   width: 38px;
 401   height: 38px;
 402   overflow: hidden;
 403   background-color: white;
 404   border-radius: 4px;
 405   padding: 0.3rem;
 406 }
 407
 408 .chat-header__group-avatar-upload-progress {
 409   position: absolute;
 410   left: 0;
 411   bottom: 0;
 412
 413   width: 100%;
 414   height: 4px;
 415   background-color: fade(@caribbean, 75%);
 416   border-bottom-left-radius: 4px;
 417   border-bottom-right-radius: 4px;
 418
 419   transition: width 0.3s ease, background-color 0.2s ease;
 420
 421   animation-name: avatar-upload-progress-pulse;
 422   animation-duration: 0.4s;
 423   animation-iteration-count: infinite;
 424   animation-timing-function: linear;
 425   animation-direction: alternate;
 426 }
 427
 428 @keyframes avatar-upload-progress-pulse {
 429   to {
 430     background-color: fade(@caribbean, 40%);
 431   }
 432 }
 433
 434 .chat-header-wrapper {
 435   height: 100%;
 436 }
 437
 438 .chat-and-toolbar-wrapper {
 439   box-sizing: border-box;
 440   display: flex;
 441   justify-content: flex-end;
 442   align-items: stretch;
 443   height: 100%;
 444   padding-top: @chat-frame-desktop-header-height;
 445 }
 446
 447 .chat-app {
 448   box-sizing: border-box;
 449   overflow: hidden;
 450   position: relative;
 451   flex: 1;
 452   display: flex;
 453   flex-direction: column;
 454   /* Sometimes `.chat-and-toolbar-wrapper` isn't a parent */
 455   height: 100%;
 456 }
 457
 458 .org-page-link {
 459   &:hover {
 460     text-decoration: none;
 461   }
 462 }