new-chat.module.scss 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. .new-chat {
  2. height: 100%;
  3. width: 100%;
  4. display: flex;
  5. align-items: center;
  6. justify-content: center;
  7. flex-direction: column;
  8. padding-top: 80px;
  9. .mask-cards {
  10. display: flex;
  11. margin-bottom: 20px;
  12. .mask-card {
  13. padding: 20px 10px;
  14. border: var(--border-in-light);
  15. box-shadow: var(--card-shadow);
  16. border-radius: 14px;
  17. background-color: var(--white);
  18. transform: scale(1);
  19. &:first-child {
  20. transform: rotate(-15deg) translateY(5px);
  21. }
  22. &:last-child {
  23. transform: rotate(15deg) translateY(5px);
  24. }
  25. }
  26. }
  27. .title {
  28. font-size: 32px;
  29. font-weight: bolder;
  30. animation: slide-in ease 0.3s;
  31. }
  32. .sub-title {
  33. animation: slide-in ease 0.3s;
  34. }
  35. .search-bar {
  36. margin-top: 20px;
  37. }
  38. .masks {
  39. flex-grow: 1;
  40. width: 100%;
  41. overflow: hidden;
  42. align-items: center;
  43. padding-top: 20px;
  44. animation: slide-in ease 0.3s;
  45. .mask-row {
  46. margin-bottom: 10px;
  47. display: flex;
  48. justify-content: center;
  49. @for $i from 1 to 10 {
  50. &:nth-child(#{$i * 2}) {
  51. margin-left: 50px;
  52. }
  53. }
  54. .mask {
  55. display: flex;
  56. align-items: center;
  57. padding: 10px 16px;
  58. border: var(--border-in-light);
  59. box-shadow: var(--card-shadow);
  60. background-color: var(--white);
  61. border-radius: 10px;
  62. margin-right: 10px;
  63. width: 100px;
  64. transform: scale(1);
  65. cursor: pointer;
  66. transition: all ease 0.3s;
  67. &:hover {
  68. transform: translateY(-5px) scale(1.1);
  69. z-index: 999;
  70. border-color: var(--primary);
  71. }
  72. .mask-avatar {
  73. display: flex;
  74. min-width: 18px;
  75. min-height: 18px;
  76. background-color: #eee;
  77. border-radius: 20px;
  78. }
  79. .mask-name {
  80. margin-left: 10px;
  81. }
  82. }
  83. }
  84. }
  85. }