_controlbox.scss 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. #conversejs.fullscreen {
  2. #controlbox {
  3. @include make-col-ready();
  4. @include media-breakpoint-up(md) {
  5. @include make-col(3);
  6. }
  7. @include media-breakpoint-up(xl) {
  8. @include make-col(2);
  9. }
  10. &.logged-out {
  11. @include make-col(12);
  12. }
  13. margin: 0;
  14. .controlbox-pane {
  15. border-radius: 0;
  16. }
  17. .flyout {
  18. border-radius: 0;
  19. }
  20. #converse-login-panel {
  21. border-radius: 0;
  22. .converse-form {
  23. padding: 3em 2em 3em;
  24. }
  25. }
  26. .toggle-register-login {
  27. line-height: $line-height-huge;
  28. }
  29. .brand-heading-container {
  30. @include make-col(12);
  31. text-align: center;
  32. .brand-heading {
  33. font-size: 150%;
  34. font-size: 600%;
  35. padding: 0.7em 0 0 0;
  36. opacity: 0.8;
  37. color: $blue;
  38. }
  39. .brand-subtitle {
  40. font-size: 90%;
  41. padding: 0.5em;
  42. }
  43. @media screen and (max-width: $mobile-portrait-length) {
  44. .brand-heading {
  45. font-size: 400%;
  46. }
  47. }
  48. }
  49. &.logged-out {
  50. @include make-col(12);
  51. @include fade-in;
  52. width: 100%;
  53. .box-flyout {
  54. width: 100%;
  55. }
  56. }
  57. .box-flyout {
  58. border: 0;
  59. width: 100%;
  60. z-index: 1;
  61. background-color: $controlbox-head-color;
  62. .controlbox-head {
  63. display: none;
  64. }
  65. }
  66. #converse-register, #converse-login {
  67. @include make-col-ready();
  68. @include make-col(8);
  69. @include make-col-offset(2);
  70. @include media-breakpoint-up(sm) {
  71. @include make-col(8);
  72. @include make-col-offset(2);
  73. }
  74. @include media-breakpoint-up(md) {
  75. @include make-col(8);
  76. @include make-col-offset(2);
  77. }
  78. @include media-breakpoint-up(lg) {
  79. @include make-col(6);
  80. @include make-col-offset(3);
  81. }
  82. .title, .instructions {
  83. margin: 1em 0;
  84. }
  85. input[type=submit],
  86. input[type=button] {
  87. width: auto;
  88. }
  89. }
  90. }
  91. }