guillaume.topenot
/
ReAct_PME
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
11 Commits
2 Branches
Tree: 903b7db0e7
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '903b7db0e7'
${ noResults }
ReAct_PME/WebUI/ReAct_PME.WebUI/Pages/ChatRoom/ChatRoom_base.razor.css

571 lines
10KB
Raw Blame History 

  1. 

  2. .chatroom-container {

  3.     display: flex;

  4.     flex-direction: column;

  5.     height: 100%;

  6.     background: var(--bg-light);

  7. }

  8. 

  9. .chatroom-messages {

  10.     flex: 1;

  11.     overflow-y: auto;

  12.     padding: 2rem;

  13.     display: flex;

  14.     flex-direction: column;

  15.     gap: 1.5rem;

  16. }

  17. 

  18.     .chatroom-messages::-webkit-scrollbar {

  19.         width: 8px;

  20.     }

  21. 

  22.     .chatroom-messages::-webkit-scrollbar-track {

  23.         background: transparent;

  24.     }

  25. 

  26.     .chatroom-messages::-webkit-scrollbar-thumb {

  27.         background: var(--secondary);

  28.         border-radius: 4px;

  29.     }

  30. 

  31.         .chatroom-messages::-webkit-scrollbar-thumb:hover {

  32.             background: var( --third-color);

  33.         }

  34. 

  35. .chatroom-empty {

  36.     display: flex;

  37.     flex-direction: column;

  38.     align-items: center;

  39.     justify-content: center;

  40.     height: 100%;

  41.     color: var(--text-light);

  42.     text-align: center;

  43. }

  44. 

  45. .empty-icon {

  46.     font-size: 4rem;

  47.     color: var(--secondary);

  48.     margin-bottom: 1rem;

  49.     opacity: 0.5;

  50. }

  51. 

  52. .chatroom-empty h3 {

  53.     font-size: 1.5rem;

  54.     color: var(--text-dark);

  55.     margin-bottom: 0.5rem;

  56. }

  57. 

  58. .chatroom-empty p {

  59.     font-size: 1rem;

  60.     margin: 0;

  61. }

  62. 

  63. /* Messages */

  64. .message-row {

  65.     display: flex;

  66.     align-items: flex-start;

  67.     gap: 0.75rem;

  68.     animation: fadeIn 0.3s ease;

  69. }

  70. 

  71. @keyframes fadeIn {

  72.     from {

  73.         opacity: 0;

  74.         transform: translateY(10px);

  75.     }

  76. 

  77.     to {

  78.         opacity: 1;

  79.         transform: translateY(0);

  80.     }

  81. }

  82. 

  83. .message-row.user {

  84.     flex-direction: row-reverse;

  85.     justify-content: flex-start;

  86. }

  87. 

  88. .message-row.assistant {

  89.     flex-direction: row;

  90.     justify-content: flex-start;

  91. }

  92. 

  93. .avatar {

  94.     width: 40px;

  95.     height: 40px;

  96.     border-radius: 50%;

  97.     display: flex;

  98.     align-items: center;

  99.     justify-content: center;

  100.     flex-shrink: 0;

  101. }

  102. 

  103. .avatar-user {

  104.     background: linear-gradient(135deg, var(--secondary) 0%, var( --third-color) 100%);

  105.     color: white;

  106. }

  107. 

  108. .avatar-assistant {

  109.     background: linear-gradient(135deg, var( --contrast) 0%, #e02851 100%);

  110.     color: white;

  111. }

  112. 

  113. .message-content-wrapper {

  114.     display: flex;

  115.     flex-direction: column;

  116.     max-width: 70%;

  117.     gap: 0.5rem;

  118. }

  119. 

  120. .message-row.user .message-content-wrapper {

  121.     align-items: flex-end;

  122. }

  123. 

  124. .message-row.assistant .message-content-wrapper {

  125.     align-items: flex-start;

  126. }

  127. 

  128. .bubble {

  129.     padding: 1rem 1.25rem;

  130.     border-radius: 16px;

  131.     font-size: 1rem;

  132.     line-height: 1.6;

  133.     word-wrap: break-word;

  134.     white-space: pre-wrap;

  135. }

  136. 

  137. .bubble-user {

  138.     background: linear-gradient(135deg, var(--secondary) 0%, var( --third-color) 100%);

  139.     color: white;

  140.     border-bottom-right-radius: 4px;

  141. }

  142. 

  143. .bubble-assistant {

  144.     background: white;

  145.     color: var(--text-dark);

  146.     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

  147.     border-bottom-left-radius: 4px;

  148. }

  149. 

  150. .message-actions {

  151.     display: flex;

  152.     gap: 0.5rem;

  153. }

  154. 

  155. .btn-message-action {

  156.     width: 32px;

  157.     height: 32px;

  158.     border-radius: 6px;

  159.     border: none;

  160.     background: transparent;

  161.     color: var(--text-light);

  162.     cursor: pointer;

  163.     display: flex;

  164.     align-items: center;

  165.     justify-content: center;

  166.     transition: all 0.2s ease;

  167. }

  168. 

  169.     .btn-message-action:hover {

  170.         background: var(--bg-light);

  171.         color: var( --third-color);

  172.     }

  173. 

  174. .typing-indicator {

  175.     display: flex;

  176.     gap: 0.4rem;

  177.     padding: 0.5rem 0;

  178. }

  179. 

  180.     .typing-indicator span {

  181.         width: 8px;

  182.         height: 8px;

  183.         border-radius: 50%;

  184.         background-color: var(--secondary);

  185.         animation: typing 1.4s infinite;

  186.     }

  187. 

  188.         .typing-indicator span:nth-child(2) {

  189.             animation-delay: 0.2s;

  190.         }

  191. 

  192.         .typing-indicator span:nth-child(3) {

  193.             animation-delay: 0.4s;

  194.         }

  195. 

  196. @keyframes typing {

  197.     0%, 60%, 100% {

  198.         transform: translateY(0);

  199.         opacity: 0.7;

  200.     }

  201. 

  202.     30% {

  203.         transform: translateY(-10px);

  204.         opacity: 1;

  205.     }

  206. }

  207. 

  208. 

  209. .chat-input-container {

  210.     width: 100%;

  211.     padding: 16px 24px;

  212.     background: transparent;

  213.     display: flex;

  214.     flex-direction: column;

  215.     justify-content: center;

  216.     position: relative;

  217. }

  218. 

  219. /* Fichiers attachés */

  220. .attached-files {

  221.     display: flex;

  222.     flex-wrap: wrap;

  223.     gap: 8px;

  224.     padding: 12px 16px;

  225.     max-width: 1000px;

  226.     margin: 0 auto;

  227.     width: 100%;

  228. }

  229. 

  230. .file-item {

  231.     display: flex;

  232.     align-items: center;

  233.     gap: 8px;

  234.     padding: 8px 12px;

  235.     background: #ffffff;

  236.     border: 1px solid var(--border);

  237.     border-radius: 8px;

  238.     max-width: 32%;

  239.     transition: all 0.2s ease;

  240.     animation: fileSlideIn 0.3s ease;

  241. }

  242. 

  243.     .file-item:hover {

  244.         border-color: #d1d5db;

  245.         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

  246.     }

  247. 

  248. .file-preview {

  249.     flex-shrink: 0;

  250.     width: 40px;

  251.     height: 40px;

  252.     border-radius: 6px;

  253.     overflow: hidden;

  254.     background: #ffffff;

  255.     display: flex;

  256.     align-items: center;

  257.     justify-content: center;

  258.     border: 1px solid var(--border);

  259. }

  260. 

  261. .file-icon {

  262.     font-size: 20px;

  263.     color: var(--secondary);

  264. }

  265. 

  266. .file-info {

  267.     flex: 1;

  268.     min-width: 0;

  269.     display: flex;

  270.     flex-direction: column;

  271.     gap: 2px;

  272. }

  273. 

  274. .file-name {

  275.     font-size: 13px;

  276.     font-weight: 500;

  277.     color: #374151;

  278.     white-space: nowrap;

  279.     overflow: hidden;

  280.     text-overflow: ellipsis;

  281. }

  282. 

  283. .file-size {

  284.     font-size: 11px;

  285.     color: #9ca3af;

  286. }

  287. 

  288. .remove-file-button {

  289.     flex-shrink: 0;

  290.     width: 24px;

  291.     height: 24px;

  292.     display: flex;

  293.     align-items: center;

  294.     justify-content: center;

  295.     background: transparent;

  296.     border: none;

  297.     border-radius: 4px;

  298.     color: #9ca3af;

  299.     cursor: pointer;

  300.     transition: all 0.2s ease;

  301. }

  302. 

  303.     .remove-file-button:hover {

  304.         background: #fee2e2;

  305.         color: #ef4444;

  306.     }

  307. 

  308. @keyframes fileSlideIn {

  309.     from {

  310.         opacity: 0;

  311.         transform: translateY(-10px);

  312.     }

  313. 

  314.     to {

  315.         opacity: 1;

  316.         transform: translateY(0);

  317.     }

  318. }

  319. 

  320. /* Input wrapper */

  321. .input-wrapper {

  322.     width: 100%;

  323.     max-width: 1000px;

  324.     margin: 0 auto;

  325.     background: #ffffff;

  326.     border: 1px solid var(--border);

  327.     border-radius: 16px;

  328.     padding: 16px 20px;

  329.     display: flex;

  330.     flex-direction: column;

  331.     gap: 12px;

  332.     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

  333.     transition: all 0.2s ease;

  334. }

  335. 

  336.     .input-wrapper.has-files {

  337.         border-radius: 0 0 16px 16px;

  338.         border-top: none;

  339.         padding-top: 12px;

  340.     }

  341. 

  342.     .input-wrapper:focus-within {

  343.         border-color: var(--secondary);

  344.         box-shadow: 0 4px 12px rgba(41, 132, 161, 0.12);

  345.     }

  346. 

  347.     .input-wrapper textarea {

  348.         width: 100%;

  349.         border: none;

  350.         outline: none;

  351.         resize: none;

  352.         font-size: 15px;

  353.         font-family: inherit;

  354.         color: #1f2937;

  355.         background: transparent;

  356.         min-height: 24px;

  357.         max-height: 200px;

  358.         line-height: 1.5;

  359.         padding: 0;

  360.     }

  361. 

  362.         .input-wrapper textarea::placeholder {

  363.             color: #9ca3af;

  364.         }

  365. 

  366.         .input-wrapper textarea:disabled {

  367.             opacity: 0.6;

  368.             cursor: not-allowed;

  369.         }

  370. 

  371. /* Actions row */

  372. .actions-row {

  373.     display: flex;

  374.     justify-content: space-between;

  375.     align-items: center;

  376.     padding-top: 4px;

  377. }

  378. 

  379. .attach-button {

  380.     display: flex;

  381.     align-items: center;

  382.     gap: 8px;

  383.     padding: 0;

  384.     background: transparent;

  385.     border: none;

  386.     color: #6b7280;

  387.     cursor: pointer;

  388.     font-size: 13px;

  389.     font-weight: 500;

  390.     transition: color 0.2s ease;

  391. }

  392. 

  393.     .attach-button:hover {

  394.         color: var(--secondary);

  395.     }

  396. 

  397.     .attach-button span {

  398.         display: none;

  399.     }

  400. 

  401. @media (min-width: 640px) {

  402.     .attach-button span {

  403.         display: inline;

  404.     }

  405. }

  406. 

  407. .right-actions {

  408.     display: flex;

  409.     align-items: center;

  410.     gap: 8px;

  411. }

  412. 

  413. .domain-select {

  414.     padding: 6px 12px;

  415.     border: 1px solid var(--border);

  416.     border-radius: 8px;

  417.     background: white;

  418.     color: var(--text-dark);

  419.     font-size: 13px;

  420.     cursor: pointer;

  421.     transition: all 0.2s ease;

  422. }

  423. 

  424.     .domain-select:hover {

  425.         border-color: var(--secondary);

  426.     }

  427. 

  428.     .domain-select:focus {

  429.         outline: none;

  430.         border-color: var(--secondary);

  431.         box-shadow: 0 0 0 3px rgba(41, 132, 161, 0.1);

  432.     }

  433. 

  434. .voice-button {

  435.     display: flex;

  436.     align-items: center;

  437.     justify-content: center;

  438.     width: 36px;

  439.     height: 36px;

  440.     background: transparent;

  441.     border: none;

  442.     color: #6b7280;

  443.     cursor: pointer;

  444.     border-radius: 8px;

  445.     transition: all 0.2s ease;

  446. }

  447. 

  448.     .voice-button:hover {

  449.         background: #f3f4f6;

  450.         color: var(--text-dark);

  451.     }

  452. 

  453. 

  454. 

  455. 

  456. .send-button {

  457.     display: flex;

  458.     align-items: center;

  459.     justify-content: center;

  460.     width: 36px;

  461.     height: 36px;

  462.     background: var( --contrast);

  463.     border: none;

  464.     color: #ffffff;

  465.     cursor: pointer;

  466.     border-radius: 8px;

  467.     transition: all 0.2s ease;

  468. }

  469. 

  470.     .send-button:hover:not(:disabled) {

  471.         transform: scale(1.05);

  472.         box-shadow: 0 4px 12px rgba(246, 62, 99, 0.3);

  473.     }

  474. 

  475.     .send-button:active:not(:disabled) {

  476.         transform: scale(0.98);

  477.     }

  478. 

  479.     .send-button:disabled {

  480.         background: #e5e7eb;

  481.         cursor: not-allowed;

  482.         opacity: 0.6;

  483.     }

  484. 

  485.         .send-button:disabled svg {

  486.             color: #9ca3af;

  487.         }

  488. 

  489. 

  490. @media (max-width: 768px) {

  491.     .chatroom-messages {

  492.         padding: 1rem;

  493.     }

  494. 

  495.     .message-content-wrapper {

  496.         max-width: 85%;

  497.     }

  498. 

  499.     .chat-input-container {

  500.         padding: 12px 16px;

  501.     }

  502. 

  503.     .attached-files {

  504.         padding: 10px 12px;

  505.         gap: 6px;

  506.     }

  507. 

  508.     .file-item {

  509.         padding: 6px 10px;

  510.         max-width: 200px;

  511.     }

  512. 

  513.     .file-preview {

  514.         width: 36px;

  515.         height: 36px;

  516.     }

  517. 

  518.     .file-name {

  519.         font-size: 12px;

  520.     }

  521. 

  522.     .file-size {

  523.         font-size: 10px;

  524.     }

  525. 

  526.     .remove-file-button {

  527.         width: 20px;

  528.         height: 20px;

  529.     }

  530. 

  531.     .input-wrapper {

  532.         padding: 12px 16px;

  533.         border-radius: 14px;

  534.     }

  535. 

  536.         .input-wrapper.has-files {

  537.             border-radius: 0 0 14px 14px;

  538.         }

  539. 

  540.         .input-wrapper textarea {

  541.             font-size: 14px;

  542.         }

  543. 

  544.     .actions-row .right-actions {

  545.         gap: 6px;

  546.     }

  547. 

  548.     .voice-button,

  549.     .send-button {

  550.         width: 32px;

  551.         height: 32px;

  552.     }

  553. 

  554.     .domain-select {

  555.         font-size: 12px;

  556.         padding: 4px 8px;

  557.     }

  558. }

  559. 

  560. @media (max-width: 480px) {

  561.     .bubble {

  562.         padding: 0.875rem 1rem;

  563.         font-size: 0.95rem;

  564.     }

  565. 

  566.     .avatar {

  567.         width: 36px;

  568.         height: 36px;

  569.     }

  570. }