RoomDialog.scss 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. @import "../../packages/excalidraw/css/variables.module";
  2. .excalidraw {
  3. .RoomDialog {
  4. display: flex;
  5. flex-direction: column;
  6. gap: 1.5rem;
  7. @include isMobile {
  8. height: calc(100vh - 5rem);
  9. }
  10. &__popover {
  11. @keyframes RoomDialog__popover__scaleIn {
  12. from {
  13. opacity: 0;
  14. }
  15. to {
  16. opacity: 1;
  17. }
  18. }
  19. box-sizing: border-box;
  20. z-index: 100;
  21. display: flex;
  22. flex-direction: row;
  23. justify-content: center;
  24. align-items: flex-start;
  25. padding: 0.125rem 0.5rem;
  26. gap: 0.125rem;
  27. height: 1.125rem;
  28. border: none;
  29. border-radius: 0.6875rem;
  30. font-family: "Assistant";
  31. font-style: normal;
  32. font-weight: 600;
  33. font-size: 0.75rem;
  34. line-height: 110%;
  35. background: var(--color-success-lighter);
  36. color: var(--color-success);
  37. & > svg {
  38. width: 0.875rem;
  39. height: 0.875rem;
  40. }
  41. transform-origin: var(--radix-popover-content-transform-origin);
  42. animation: RoomDialog__popover__scaleIn 150ms ease-out;
  43. }
  44. &__inactive {
  45. font-family: "Assistant";
  46. &__illustration {
  47. display: flex;
  48. width: 100%;
  49. align-items: center;
  50. justify-content: center;
  51. & svg {
  52. filter: var(--theme-filter);
  53. }
  54. }
  55. &__header {
  56. display: flex;
  57. width: 100%;
  58. align-items: center;
  59. justify-content: center;
  60. font-weight: 700;
  61. font-size: 1.3125rem;
  62. line-height: 130%;
  63. color: var(--color-primary);
  64. }
  65. &__description {
  66. font-weight: 400;
  67. font-size: 0.875rem;
  68. line-height: 150%;
  69. text-align: center;
  70. color: var(--text-primary-color);
  71. & strong {
  72. display: block;
  73. font-weight: 700;
  74. }
  75. }
  76. &__start_session {
  77. display: flex;
  78. align-items: center;
  79. justify-content: center;
  80. }
  81. }
  82. &__active {
  83. &__share {
  84. display: none !important;
  85. @include isMobile {
  86. display: flex !important;
  87. }
  88. }
  89. &__header {
  90. margin: 0;
  91. }
  92. &__linkRow {
  93. display: flex;
  94. flex-direction: row;
  95. align-items: flex-end;
  96. gap: 0.75rem;
  97. }
  98. &__description {
  99. border-top: 1px solid var(--color-gray-20);
  100. padding: 0.5rem 0.5rem 0;
  101. font-weight: 400;
  102. font-size: 0.75rem;
  103. line-height: 150%;
  104. & p {
  105. margin: 0;
  106. }
  107. & p + p {
  108. margin-top: 1em;
  109. }
  110. }
  111. &__actions {
  112. display: flex;
  113. justify-content: center;
  114. }
  115. }
  116. }
  117. }