public/js/views/modals/room-settings-view.less

   1 .room-settings {
   2   width: 100%;
   3   display: flex;
   4   flex-direction: column;
   5   margin-bottom: 0;
   6 }
   7
   8 .welcome-message-label {
   9   margin-bottom: 1rem;
  10 }
  11
  12 .welcome-message-container {
  13   box-sizing: border-box;
  14   position: relative;
  15   width: 100%;
  16   min-height: 30rem;
  17   padding: 0;
  18 }
  19
  20 .welcome-message {
  21   box-sizing: border-box;
  22   position: absolute;
  23   top: 0;
  24   left: 0;
  25   width: 100%;
  26   height: 100%;
  27   padding: 1rem;
  28   margin-bottom: 0;
  29   outline: none;
  30   resize: none;
  31
  32   &:focus {
  33     box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  34   }
  35 }
  36
  37 .preview-container {
  38   position: absolute;
  39   top: 0;
  40   left: 0;
  41   width: 100%;
  42   height: 100%;
  43   opacity: 0;
  44   pointer-events: none;
  45
  46   &.loading {
  47     display: flex;
  48     align-items: center;
  49     justify-content: center;
  50   }
  51
  52   .preview & {
  53     opacity: 1;
  54     pointer-events: auto;
  55   }
  56 }
  57
  58 .settings-checkbox-container {
  59   margin-bottom: 0.8rem;
  60 }
  61
  62 //Specificity issue
  63 input.settings-checkbox {
  64   margin: 0 0.2rem;
  65 }
  66
  67 .welcome-message-controls {
  68   width: 100%;
  69   text-align: right;
  70 }
  71
  72 .preview-welcome-message {
  73   padding: 0.8em 1rem;
  74
  75   .preview & {
  76     display: none;
  77   }
  78 }
  79
  80 .close-welcome-message-preview {
  81   display: none;
  82   padding: 0.8em 1rem;
  83
  84   .preview & {
  85     display: inline-block;
  86   }
  87 }