styles.css 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. /* 整体布局 */
  2. .container-fluid {
  3. max-width: 1200px;
  4. margin: 0 auto;
  5. padding: 0 0 1rem 0;
  6. background-color: transparent;
  7. }
  8. .container-fluid:not(.not-bg) {
  9. background-image: url("../image/bg_dialog@2x.png");
  10. background-size: 100% 100%;
  11. background-repeat: no-repeat;
  12. background-color: #f5f6f7;
  13. background-position-y: -24px;
  14. }
  15. /* 输入区域 */
  16. #message-input {
  17. resize: none;
  18. border: 1px solid #dadce0;
  19. border-radius: 0.75rem;
  20. padding: 0.5rem 0.75rem;
  21. background: white;
  22. box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  23. line-height: 2; /* 标准行高 */
  24. min-height: calc(1.5em + 1rem + 2px); /* 自动高度计算 */
  25. display: flex;
  26. align-items: center; /* 垂直居中 */
  27. }
  28. #message-input:focus {
  29. outline: none;
  30. border-color: var(--primary-color);
  31. box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
  32. }
  33. #send-btn {
  34. border-radius: 0.75rem;
  35. margin-left: 0.5rem;
  36. padding: 0.5rem 1.2rem;
  37. }
  38. /* 卡片样式 */
  39. .card {
  40. border: none;
  41. border-radius: 12px;
  42. box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  43. }
  44. .card-header {
  45. font-weight: 600;
  46. border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  47. }
  48. /* 标签页样式 */
  49. .nav-tabs .nav-link {
  50. border: none;
  51. border-radius: 0;
  52. padding: 12px 20px;
  53. color: #5f6368;
  54. font-weight: 500;
  55. }
  56. .nav-tabs .nav-link.active {
  57. color: var(--primary-color);
  58. border-bottom: 3px solid var(--primary-color);
  59. background: transparent;
  60. }
  61. /* 滚动条美化 */
  62. ::-webkit-scrollbar {
  63. width: 8px;
  64. }
  65. ::-webkit-scrollbar-track {
  66. background: #f1f1f1;
  67. border-radius: 4px;
  68. }
  69. ::-webkit-scrollbar-thumb {
  70. background: #c1c1c1;
  71. border-radius: 4px;
  72. }
  73. ::-webkit-scrollbar-thumb:hover {
  74. background: #a8a8a8;
  75. }