首頁 探索 說明
註冊 登入
GlobalCube
/
Reisacher-Forderung
3
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
目錄樹: 585f7d49ff
分支列表 標籤列表
Reisacher-Forde...
/
static
/
assets
/
css
/
details.css

details.css 12 KB
文件歷史 原始文件

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200 
  1. /* Invoice detail page. Shared theme rules live in app.css. */
    2. 

  2. .gc-page.gc-detail-page {
    3. 

  3.   --primary: #526b7e;
    4. 

  4.   --primary-light: #72889b;
    5. 

  5.   --text-light: #52616f;
    6. 

  6.   --border: #dce2e7;
    7. 

  7.   --cui-primary: #72889b;
    8. 

  8.   --gc-button-orange: #c45500;
    9. 

  9.   --gc-button-orange-hover: #a74700;
    10. 

  10.   --gc-button-orange-active: #8f3e00;
    11. 

  11.   font-size: 1.0625rem;
    12. 

  12.   width: 100%;
    13. 

  13.   padding: 0 0 2rem;
    14. 

  14.   gap: 1.25rem;
    15. 

  15.   overflow: visible;
    16. 

  16.   color: var(--gc-brand-ink);
    17. 

  17. }
    18. 

  18. body:has(.gc-detail-page) { max-width: 1840px; }
    19. 

  19. .gc-detail-page *, .gc-app-header * { min-width: 0; }
    20. 

  20. .gc-case-context {
    21. 

  21.   position: sticky;
    22. 

  22.   top: var(--gc-header-height);
    23. 

  23.   z-index: 1020;
    24. 

  24.   display: flex;
    25. 

  25.   flex-wrap: wrap;
    26. 

  26.   align-items: center;
    27. 

  27.   justify-content: space-between;
    28. 

  28.   gap: .75rem 1.5rem;
    29. 

  29.   padding: 1rem 1.25rem;
    30. 

  30.   background: #f4f6f8;
    31. 

  31.   border-bottom: 1px solid var(--gc-brand-border);
    32. 

  32. }
    33. 

  33. .gc-context-heading { flex: 1 1 24rem; }
    34. 

  34. .gc-context-heading h1 { margin: .25rem 0; font-size: clamp(1.325rem, 1.6vw, 1.75rem); line-height: 1.4; font-weight: 700; overflow-wrap: anywhere; }
    35. 

  35. .gc-context-heading p { margin: 0; font-size: 1.0625rem; }
    36. 

  36. .gc-context-heading p span { color: #52616f; }
    37. 

  37. .gc-detail-page .gc-back-link { font-size: 1rem; text-decoration: none; }
    38. 

  38. .gc-context-metrics { display: flex; gap: .65rem; flex-wrap: wrap; }
    39. 

  39. .gc-metric { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .85rem; border-radius: 8px; }
    40. 

  40. .gc-metric span { font-size: 1rem; }
    41. 

  41. .gc-metric strong { font-size: 1.275rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
    42. 

  42. .gc-metric-balance { background: #c7dee7; }
    43. 

  43. .gc-metric-level { background: #ffe97e; }
    44. 

  44. .gc-metric-clear { background: #b6cb9b; }
    45. 

  45. .gc-case-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); gap: 1.25rem; align-items: start; padding: 0 1.25rem; }
    46. 

  46. .gc-case-data, .gc-case-conversation, .gc-case-actions { display: flex; flex-direction: column; gap: 1rem; }
    47. 

  47. .gc-detail-card, .gc-detail-page .chat-container { background: #fff; border: 1px solid #dce2e7; border-radius: 10px; box-shadow: 0 2px 6px #18263004; }
    48. 

  48. .gc-detail-page :is(#comments-title, #actions-title) { background: var(--gc-brand-action); color: #fff; }
    49. 

  49. .gc-data-fields { margin: 0; padding: .4rem 1rem; }
    50. 

  50. .gc-data-field { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: .65rem; padding: .5rem 0; border-bottom: 1px solid #edf0f2; font-size: 1.0625rem; line-height: 1.5; }
    51. 

  51. .gc-data-field:last-child { border-bottom: 0; }
    52. 

  52. .gc-data-field dt { color: #52616f; font-weight: 500; overflow-wrap: anywhere; }
    53. 

  53. .gc-data-field dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
    54. 

  54. .gc-data-field a { color: #354f63; }
    55. 

  55. .gc-data-field.gc-field-money dd { font-variant-numeric: tabular-nums; }
    56. 

  56. .gc-field-total dd, .gc-field-age dd { justify-self: start; align-self: start; padding: 0 .3rem; border-radius: 3px; }
    57. 

  57. .gc-field-total dd { background: #d3d3d3; }
    58. 

  58. .gc-field-age dd { background: #e98751; }
    59. 

  59. .gc-data-more { border-top: 1px solid #edf0f2; }
    60. 

  60. .gc-data-more summary { cursor: pointer; padding: .65rem 1rem; font-size: 1rem; font-weight: 600; color: #354f63; }
    61. 

  61. .gc-data-more[open] summary { background: #f4f6f8; }
    62. 

  62. .gc-detail-page .btn { white-space: normal !important; border-radius: 6px; font-size: 1.0625rem; padding: .5rem .75rem; }
    63. 

  63. /* Orange gives the main action a clear emphasis against the blue-grey panels. */
    64. 

  64. .gc-detail-page .btn-primary {
    65. 

  65.   --cui-btn-bg: var(--gc-button-orange);
    66. 

  66.   --cui-btn-border-color: var(--gc-button-orange);
    67. 

  67.   --cui-btn-color: #fff;
    68. 

  68.   --cui-btn-hover-bg: var(--gc-button-orange-hover);
    69. 

  69.   --cui-btn-hover-border-color: var(--gc-button-orange-hover);
    70. 

  70.   --cui-btn-hover-color: #fff;
    71. 

  71.   --cui-btn-active-bg: var(--gc-button-orange-active);
    72. 

  72.   --cui-btn-active-border-color: var(--gc-button-orange-active);
    73. 

  73.   --cui-btn-active-color: #fff;
    74. 

  74.   --cui-btn-disabled-bg: var(--gc-button-orange);
    75. 

  75.   --cui-btn-disabled-border-color: var(--gc-button-orange);
    76. 

  76.   --cui-btn-disabled-color: #fff;
    77. 

  77.   --cui-btn-focus-shadow-rgb: 196, 85, 0;
    78. 

  78. }
    79. 

  79. .gc-detail-page .btn-outline-primary {
    80. 

  80.   --cui-btn-color: var(--gc-button-orange);
    81. 

  81.   --cui-btn-bg: #fff;
    82. 

  82.   --cui-btn-border-color: var(--gc-button-orange);
    83. 

  83.   --cui-btn-hover-bg: #fff1e6;
    84. 

  84.   --cui-btn-hover-border-color: var(--gc-button-orange-hover);
    85. 

  85.   --cui-btn-hover-color: var(--gc-button-orange-hover);
    86. 

  86.   --cui-btn-active-bg: #ffe1c7;
    87. 

  87.   --cui-btn-active-border-color: var(--gc-button-orange-active);
    88. 

  88.   --cui-btn-active-color: var(--gc-button-orange-active);
    89. 

  89.   --cui-btn-disabled-color: var(--gc-button-orange);
    90. 

  90.   --cui-btn-disabled-border-color: var(--gc-button-orange);
    91. 

  91.   --cui-btn-focus-shadow-rgb: 196, 85, 0;
    92. 

  92. }
    93. 

  93. .gc-detail-page :is(.gc-back-link, .gc-form-actions > a) { --cui-btn-bg: #fff; }
    94. 

  94. .gc-detail-page .btn-outline-secondary { --cui-btn-color: #354f63; --cui-btn-border-color: #b1bcc7; --cui-btn-hover-bg: #cdd4da; --cui-btn-hover-color: #182630; --cui-btn-hover-border-color: #72889b; }
    95. 

  95. .gc-detail-page .btn-link { color: #354f63; }
    96. 

  96. .gc-detail-page .gc-workflow-form { margin: 0; padding: 1rem; --cui-gutter-x: 0; --cui-gutter-y: .75rem; }
    97. 

  97. .gc-workflow-form > .col-12 { padding: 0; }
    98. 

  98. .gc-workflow-form .form-check { padding: .65rem .75rem .65rem 2.25rem; border-radius: 6px; background: #f4f6f8; }
    99. 

  99. .gc-workflow-form .form-check-input:checked { background-color: #526b7e; border-color: #526b7e; }
    100. 

  100. .gc-workflow-form .form-check-label { font-size: 1.0625rem; }
    101. 

  101. .gc-workflow-form .card-body { padding: .85rem; background: #fafbfc; border-color: #dce2e7; box-shadow: none; }
    102. 

  102. .gc-workflow-form .card-body .row, .gc-workflow-form .gc-follow-up .row { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .85rem; }
    103. 

  103. .gc-workflow-form .row > .col-form-label { flex: 0 0 100%; padding: 0; font-size: 1rem; color: #52616f; }
    104. 

  104. .gc-workflow-form .row > div { flex: 1 1 7rem; padding: 0; }
    105. 

  105. .gc-workflow-form .card-body > .col-3 { width: auto; }
    106. 

  106. .gc-workflow-form :is(.form-control, .form-select) { width: 100%; font-size: 1.0625rem; min-height: 38px; border-color: #b1bcc7; }
    107. 

  107. .gc-detail-page input[type="date"]::-webkit-datetime-edit-year-field,
    108. 

  108. .gc-detail-page input[type="date"]::-webkit-datetime-edit-month-field,
    109. 

  109. .gc-detail-page input[type="date"]::-webkit-datetime-edit-day-field,
    110. 

  110. .gc-detail-page input[type="date"]::-webkit-datetime-edit-text { color: var(--gc-brand-ink); }
    111. 

  111. .gc-workflow-form .form-control:focus, .gc-workflow-form .form-select:focus { border-color: #526b7e; box-shadow: 0 0 0 3px #72889b33; }
    112. 

  112. .gc-workflow-form .gc-form-actions { display: flex; flex-wrap: wrap; gap: .5rem; border-top: 1px solid #dce2e7; padding-top: 1rem; }
    113. 

  113. .gc-workflow-form .gc-follow-up { border-top: 1px solid #dce2e7; padding-top: 1rem; }
    114. 

  114. .gc-detail-page .chat-container { height: clamp(32rem, calc(100dvh - var(--gc-header-height) - var(--gc-context-height) - 2rem), 58rem); }
    115. 

  115. .gc-detail-page .chat-container > .gc-section-title { flex: 0 0 auto; }
    116. 

  116. .gc-detail-page .chat-container > .gc-section-description { flex: 0 0 auto; padding-bottom: .75rem; overflow-wrap: anywhere; }
    117. 

  117. .gc-detail-page .chat-content { padding: 1rem; min-height: 0; gap: 1rem; }
    118. 

  118. .gc-detail-page .chat-container .message { max-width: 92%; flex-shrink: 0; }
    119. 

  119. .gc-detail-page .chat-container .message-header { flex-wrap: wrap; gap: .3rem .5rem; }
    120. 

  120. .gc-detail-page .chat-container .message-bubble {
    121. 

  121.   padding: .65rem .85rem;
    122. 

  122.   border-radius: 10px;
    123. 

  123.   overflow-wrap: anywhere;
    124. 

  124.   font-size: 1.0625rem;
    125. 

  125.   line-height: 1.55;
    126. 

  126.   color: #182630;
    127. 

  127.   background: #f3f4f6;
    128. 

  128.   background: color-mix(in srgb, var(--gc-role-accent, #72889b) 7%, #f3f4f6);
    129. 

  129.   border-inline-start: 3px solid color-mix(in srgb, var(--gc-role-accent, #72889b) 45%, #dce2e7);
    130. 

  130. }
    131. 

  131. .gc-detail-page .chat-container .avatar { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 7px; }
    132. 

  132. .gc-detail-page .chat-container .sender-name { font-size: 1rem; }
    133. 

  133. .gc-detail-page .chat-container .timestamp, .gc-detail-page .comment-invoice { font-size: 0.9375rem; }
    134. 

  134. .gc-detail-page .chat-container .message-input { font-size: 1.0625rem; }
    135. 

  135. .gc-detail-page .chat-container .FIBU { --gc-role-accent: #dc3545; }
    136. 

  136. .gc-detail-page .chat-container .GSL { --gc-role-accent: #6e131c; }
    137. 

  137. .gc-detail-page .chat-container .GWL { --gc-role-accent: #fd7e14; }
    138. 

  138. .gc-detail-page .chat-container .ZD { --gc-role-accent: #6f42c1; }
    139. 

  139. .gc-detail-page .chat-container .ALV { --gc-role-accent: #0c408f; }
    140. 

  140. .gc-detail-page .chat-container .NAGA { --gc-role-accent: #0d6efd; }
    141. 

  141. .gc-detail-page .chat-container .Serviceleiter { --gc-role-accent: #198754; }
    142. 

  142. .gc-detail-page .chat-container .SC { --gc-role-accent: #20c997; }
    143. 

  143. .gc-detail-page .chat-container .TUZ { --gc-role-accent: #5b6067; }
    144. 

  144. .gc-detail-page .chat-container .input-area { padding: .85rem 1rem; flex: 0 0 auto; }
    145. 

  145. .gc-detail-page .chat-container .toolbar { margin: 0; }
    146. 

  146. .gc-detail-page #comment-form { display: flex; align-items: center; gap: .5rem; }
    147. 

  147. .gc-detail-page .chat-container .message-input { min-width: 0; width: 100%; height: 42px; padding: .6rem .75rem; }
    148. 

  148. .gc-detail-page .chat-container .message-input:focus { border-color: #526b7e; box-shadow: 0 0 0 3px #72889b33; }
    149. 

  149. .gc-detail-page .history-tabs { padding: .25rem .5rem 0; gap: 0; }
    150. 

  150. .gc-detail-page .history-tab { font-size: 1rem; padding: .65rem .5rem; white-space: normal; }
    151. 

  151. .gc-detail-page .history-tab.active { color: #354f63; border-color: #526b7e; background: #edf2f5; }
    152. 

  152. .gc-detail-page .gc-table-scroll { overflow-x: auto; max-width: 100%; }
    153. 

  153. .gc-detail-page .table { margin: 0; font-size: 1.0625rem; }
    154. 

  154. .gc-detail-page .table :is(th, td) { padding: .6rem .8rem; vertical-align: top; }
    155. 

  155. .gc-detail-page .table th { background: #eef1f4; font-size: 1rem; }
    156. 

  156. .gc-detail-page .table thead { position: static; }
    157. 

  157. .gc-detail-page .table td { overflow-wrap: anywhere; }
    158. 

  158. .gc-detail-page .table .text-end { white-space: nowrap; font-variant-numeric: tabular-nums; }
    159. 

  159. .gc-case-history { margin: 0 1.25rem; }
    160. 

  160. .gc-detail-page #bookings-history > p { margin: .75rem 1rem; }
    161. 

  161. .gc-detail-page [role="status"] { color: #52616f; }
    162. 

  162. /* Keep booking text black, including reminders; only the type badge is colored. */
    163. 

  163. .gc-detail-page .gc-history-content { padding: .75rem 1rem 1rem; }
    164. 

  164. .gc-detail-page .gc-history-content .history-tabs { padding-left: 0; padding-right: 0; margin-bottom: .75rem; }
    165. 

  165. .gc-detail-page .gc-history-content .table { --cui-table-color: #000; --cui-table-striped-color: #000; }
    166. 

  166. .gc-detail-page .gc-history-content .table td { color: #000; }
    167. 

  167. .gc-detail-page .gc-files-table { --cui-table-bg: #fff; }
    168. 

  168. .gc-detail-page .gc-files-table :is(th, td) { background: #fff; box-shadow: none; }
    169. 

  169. @media (max-width: 1199.98px) {
    170. 

  170.   .gc-case-grid { grid-template-columns: minmax(0, 1fr); }
    171. 

  171.   .gc-detail-page .chat-container { height: 38rem; }
    172. 

  172. }
    173. 

  173. @media (max-width: 575.98px) {
    174. 

  174.   .gc-case-context { padding: .65rem .75rem; gap: .5rem; }
    175. 

  175.   .gc-context-heading { flex-basis: 100%; }
    176. 

  176.   .gc-context-heading h1 { font-size: 1.25rem; }
    177. 

  177.   .gc-context-metrics { width: 100%; }
    178. 

  178.   .gc-metric { flex-direction: row; align-items: center; gap: .5rem; padding: .35rem .6rem; }
    179. 

  179.   .gc-metric strong { font-size: 1.075rem; }
    180. 

  180.   .gc-case-grid { padding: 0 .5rem; gap: 1rem; }
    181. 

  181.   .gc-case-history { margin: 0 .5rem; }
    182. 

  182. }
    183. 

  183. 

  184. /* Pending attachments stay local until the comment form is submitted. */
    185. 

  185. .gc-detail-page #comment-form { flex-direction: column; align-items: stretch; }
    186. 

  186. .gc-detail-page .gc-comment-compose { display: flex; gap: .5rem; align-items: center; }
    187. 

  187. .gc-detail-page .gc-comment-compose button { flex-shrink: 0; }
    188. 

  188. .gc-detail-page .gc-upload-hint { margin: 0; color: #4b6072; font-size: .9rem; }
    189. 

  189. .gc-detail-page .gc-upload-queue { list-style: none; padding: 0; margin: 0; max-height: 14rem; overflow: auto; }
    190. 

  190. .gc-detail-page .gc-upload-queue li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-top: 1px solid #dce2e7; padding: .5rem 0; }
    191. 

  191. .gc-detail-page .gc-upload-queue li > span { min-width: 0; overflow-wrap: anywhere; }
    192. 

  192. .gc-detail-page .gc-upload-error { display: block; color: #b30808; }
    193. 

  193. .gc-detail-page .gc-upload-status { margin: 0; overflow-wrap: anywhere; }
    194. 

  194. .gc-detail-page .gc-upload-status:empty, .gc-detail-page .gc-upload-queue:empty { display: none; }
    195. 

  195. .gc-detail-page .gc-assignee-field { border-top: 1px solid #dce2e7; padding-top: 1rem; }
    196. 

  196. .gc-detail-page .gc-assignee-label { display: block; color: #52616f; margin-bottom: .5rem; }
    197. 

  197. .gc-detail-page .gc-assignee-value { align-items: center; }
    198. 

  198. .gc-detail-page .gc-assignee-value > span { flex: 1; }
    199. 

  199. .gc-detail-page .gc-verursacher-edit { padding: .25rem; }
    200. 

  200. .gc-detail-page .message-input.gc-drop-active { outline: 3px solid #72889b; background: #edf1f4; }
    201.