MessageContent.styled.ts 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. import styled from 'styled-components';
  2. import { Link } from 'react-router-dom';
  3. export const Wrapper = styled.tr`
  4. background-color: ${({ theme }) => theme.topicMetaData.backgroundColor};
  5. & > td {
  6. padding: 16px;
  7. &:first-child {
  8. padding-right: 1px;
  9. }
  10. &:last-child {
  11. padding-left: 1px;
  12. }
  13. }
  14. `;
  15. export const Section = styled.div`
  16. padding: 0 16px;
  17. display: flex;
  18. gap: 1px;
  19. align-items: stretch;
  20. `;
  21. export const ContentBox = styled.div`
  22. background-color: white;
  23. padding: 24px;
  24. border-radius: 8px 0 0 8px;
  25. flex-grow: 3;
  26. & nav {
  27. padding-bottom: 16px;
  28. }
  29. `;
  30. export const MetadataWrapper = styled.div`
  31. background-color: white;
  32. padding: 24px;
  33. border-radius: 0 8px 8px 0;
  34. flex-grow: 1;
  35. display: flex;
  36. flex-direction: column;
  37. gap: 16px;
  38. min-width: 400px;
  39. `;
  40. export const Metadata = styled.span`
  41. display: flex;
  42. gap: 35px;
  43. `;
  44. export const MetadataLabel = styled.p`
  45. color: ${({ theme }) => theme.topicMetaData.color.label};
  46. font-size: 14px;
  47. width: 50px;
  48. `;
  49. export const MetadataValue = styled.p`
  50. color: ${({ theme }) => theme.topicMetaData.color.value};
  51. font-size: 14px;
  52. `;
  53. export const MetadataMeta = styled.p`
  54. color: ${({ theme }) => theme.topicMetaData.color.meta};
  55. font-size: 12px;
  56. `;
  57. export const PaginationButton = styled.button`
  58. display: flex;
  59. align-items: center;
  60. padding: 6px 12px;
  61. height: 32px;
  62. border: 1px solid ${({ theme }) => theme.pagination.borderColor.normal};
  63. box-sizing: border-box;
  64. border-radius: 4px;
  65. color: ${({ theme }) => theme.pagination.color.normal};
  66. background: none;
  67. font-family: Inter;
  68. margin-right: 13px;
  69. cursor: pointer;
  70. font-size: 14px;
  71. `;
  72. export const SchemaLink = styled(Link)``;