Home Verkennen Help
Registreren Inloggen
GlobalCube
/
Reisacher-Forderung
3
0
Vork 0
Bestanden Issues 0 Pull-aanvragen 0 Wiki
Boom: 3b0bb87594
Aftakkingen Labels
Reisacher-Forde...
/
static
/
assets
/
css
/
list.css

list.css 9.7 KB
Geschiedenis Ruwe

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112 
  1. /* All list components are scoped; the document, not the table, scrolls vertically. */
    2. 

  2. :root { --gc-summary-height: 0px; }
    3. 

  3. body:has(.gc-list-page) { max-width: 1840px; }
    4. 

  4. .gc-list-page { font-size: 1.0625rem; color: var(--gc-brand-ink); padding-bottom: calc(var(--gc-summary-height) + 1.5rem); gap: 1.25rem; }
    5. 

  5. .gc-list-page * { min-width: 0; }
    6. 

  6. .gc-list-page h1 { font-size: 1.75rem; font-weight: 700; margin: 0; }
    7. 

  7. .gc-list-filter-content { padding: 1rem; }
    8. 

  8. .gc-list-filters { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
    9. 

  9. .gc-filter-loading { display: none; position: absolute; inset: 0; z-index: 1040; align-items: center; justify-content: center; background: #ffffffb3; cursor: wait; }
    10. 

  10. .gc-list-filters.htmx-request .gc-filter-loading { display: flex; }
    11. 

  11. .gc-list-filters.htmx-request .gc-filter-group { opacity: .55; }
    12. 

  12. .gc-filter-loading-message { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border: 1px solid #b1bcc7; border-radius: 6px; background: #fff; color: #182630; box-shadow: 0 3px 12px #18263020; }
    13. 

  13. .gc-filter-spinner { width: 1.5rem; height: 1.5rem; flex-shrink: 0; border: 3px solid #dce2e7; border-top-color: #354f63; border-radius: 50%; animation: gc-filter-spin .8s linear infinite; }
    14. 

  14. @keyframes gc-filter-spin { to { transform: rotate(360deg); } }
    15. 

  15. @media (prefers-reduced-motion: reduce) { .gc-filter-spinner { animation: none; } }
    16. 

  16. .gc-filter-group { margin: 0; padding: 0; border: 0; }
    17. 

  17. .gc-filter-group + .gc-filter-group { padding-left: 1.25rem; border-left: 1px solid #dce2e7; }
    18. 

  18. .gc-filter-group legend { float: none; width: auto; font-size: 1rem; font-weight: 600; margin: 0 0 .75rem; }
    19. 

  19. .gc-filter-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
    20. 

  20. .gc-filter-field label { display: block; font-size: 1rem; color: #52616f; margin-bottom: .3rem; }
    21. 

  21. .gc-multifilter { position: relative; }
    22. 

  22. .gc-filter-toggle { width: 100%; text-align: left; background-color: #fff; }
    23. 

  23. .gc-filter-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
    24. 

  24. .gc-filter-chip { border: 1px solid #b1bcc7; border-radius: 5px; background: #edf2f5; color: #182630; padding: .2rem .4rem; margin-bottom: .3rem; font-size: .9375rem; overflow-wrap: anywhere; text-align: left; }
    25. 

  25. .gc-filter-dropdown { position: absolute; top: 100%; left: 0; z-index: 1030; width: max(100%, 20rem); max-width: calc(100vw - 3rem); max-height: 70vh; overflow-y: auto; padding: .75rem; background: #fff; border: 1px solid #b1bcc7; border-radius: 6px; box-shadow: 0 4px 18px #18263030; }
    26. 

  26. .gc-filter-options { max-height: 15rem; overflow-y: auto; margin-top: .5rem; }
    27. 

  27. .gc-filter-options label { display: flex; align-items: baseline; gap: .5rem; padding: .35rem; color: #182630; overflow-wrap: anywhere; cursor: pointer; }
    28. 

  28. .gc-filter-options label:focus-within { outline: 2px solid #526b7e; outline-offset: -2px; }
    29. 

  29. .gc-filter-options input { flex-shrink: 0; }
    30. 

  30. .gc-filter-status { margin: .5rem 0; font-size: .9375rem; }
    31. 

  31. .gc-filter-dropdown-actions { display: flex; justify-content: space-between; gap: .5rem; }
    32. 

  32. .gc-filter-dropdown .btn { border: 1px solid #b1bcc7; }
    33. 

  33. .gc-list-page :is(.form-control, .form-select) { font-size: 1.0625rem; min-height: 42px; border-color: #b1bcc7; border-radius: 6px; }
    34. 

  34. .gc-list-page :is(.form-control, .form-select):focus { border-color: #526b7e; box-shadow: 0 0 0 3px #72889b33; }
    35. 

  35. .gc-list-page input[type="date"]::-webkit-datetime-edit-year-field,
    36. 

  36. .gc-list-page input[type="date"]::-webkit-datetime-edit-month-field,
    37. 

  37. .gc-list-page input[type="date"]::-webkit-datetime-edit-day-field,
    38. 

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

  39. .gc-list-table-region { position: relative; }
    40. 

  40. .gc-list-table-scroll { position: relative; overflow-x: auto; max-width: 100%; border-radius: 0 0 9px 9px; }
    41. 

  41. .gc-list-table { width: 100%; min-width: 1560px; border-collapse: separate; border-spacing: 0; font-size: 1.0625rem; margin: 0; table-layout: fixed; color: #111; }
    42. 

  42. .gc-list-table :is(th, td) { padding: .8rem .75rem; vertical-align: top; overflow-wrap: anywhere; }
    43. 

  43. .gc-list-table thead { position: static; }
    44. 

  44. /* A visually hidden bottom caption extends the scroll height by one pixel. */
    45. 

  45. .gc-list-table caption { caption-side: top; }
    46. 

  46. .gc-list-table th { background: var(--gc-brand-action); color: #fff; font-size: 1rem; font-weight: 700; border-bottom: 1px solid #526b7e; line-height: 1.45; hyphens: auto; }
    47. 

  47. .gc-list-table tbody td { background: #fff; border-bottom: 1px solid #e5e9ed; line-height: 1.5; }
    48. 

  48. .gc-list-table .gc-invoice-row:hover td { background: #f6f8fa; }
    49. 

  49. .gc-list-table .gc-invoice-row.gc-return-highlight td { background: #dfeaf1; }
    50. 

  50. .gc-list-table .gc-invoice-row:focus-visible { outline: 3px solid #354f63; outline-offset: -3px; }
    51. 

  51. .gc-return-status { padding: .85rem 1rem; margin: 0; border: 1px solid #b1bcc7; border-radius: 6px; background: #edf2f5; }
    52. 

  52. .gc-list-table th:nth-child(1) { width: 8%; }
    53. 

  53. .gc-list-table th:nth-child(2) { width: 9%; }
    54. 

  54. .gc-list-table th:nth-child(3) { width: 10%; }
    55. 

  55. .gc-list-table th:nth-child(4) { width: 10%; }
    56. 

  56. .gc-list-table th:nth-child(5) { width: 15%; }
    57. 

  57. .gc-list-table th:nth-child(6) { width: 11%; }
    58. 

  58. .gc-list-table th:nth-child(7) { width: 8%; }
    59. 

  59. .gc-list-table th:nth-child(8) { width: 7%; }
    60. 

  60. .gc-list-table th:nth-child(9) { width: 9%; }
    61. 

  61. .gc-list-table th:nth-child(10) { width: 9%; }
    62. 

  62. .gc-list-table th:nth-child(11) { width: 4%; }
    63. 

  63. .gc-list-page a { color: #354f63; text-underline-offset: .15em; }
    64. 

  64. .gc-list-page .gc-title { font-weight: 600; }
    65. 

  65. .gc-list-page .gc-subtitle { margin-top: .3rem; font-size: 1rem; color: #52616f; line-height: 1.5; }
    66. 

  66. .gc-list-page .gc-money, .gc-list-summary strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
    67. 

  67. .gc-list-table td:nth-child(6) > .gc-money { font-weight: 700; }
    68. 

  68. .gc-list-table td:nth-child(6) .gc-subtitle { font-variant-numeric: tabular-nums; }
    69. 

  69. .gc-list-badge { display: inline-flex; align-items: center; justify-content: center; padding: .15rem .5rem; border: 1px solid #b1bcc7; border-radius: 5px; font-size: .9375rem; font-weight: 600; color: #182630; white-space: nowrap; }
    70. 

  70. .gc-list-badge-info { background: #edf2f5; }
    71. 

  71. .gc-list-badge-warning, .gc-list-badge-1 { background: #fff3bd; border-color: #c8af45; }
    72. 

  72. .gc-list-badge-2 { background: #f5dddd; border-color: #b30808; }
    73. 

  73. .gc-list-badge-0 { background: #e6eedc; border-color: #92aa78; }
    74. 

  74. .gc-wiedervorlage-edit { gap: .3rem; cursor: pointer; }
    75. 

  75. .gc-wiedervorlage-edit:hover { filter: brightness(.96); }
    76. 

  76. .gc-wiedervorlage-edit .icon { width: 1rem; height: 1rem; flex-shrink: 0; }
    77. 

  77. .gc-list-page .btn { font-size: 1rem; border-radius: 6px; }
    78. 

  78. .gc-list-page .gc-comment-toggle { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid #b1bcc7; background: #fff; color: #354f63; padding: .4rem .5rem; }
    79. 

  79. .gc-comment-toggle[aria-expanded="true"] { background: #e6edf2; }
    80. 

  80. .gc-list-page .gc-action-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px; background: #fff; color: #354f63; border: 1px solid #72889b; }
    81. 

  81. .gc-list-page .gc-action-btn:hover { background: #c7dee7; }
    82. 

  82. .gc-list-page .gc-action-btn .icon { font-size: 18px; width: 18px; height: 18px; }
    83. 

  83. .gc-list-page .gc-comment-row > td { background: #f6f8fa; padding: 1rem; }
    84. 

  84. .gc-row-comments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
    85. 

  85. .gc-row-comments section { background: #fff; border: 1px solid #dce2e7; border-radius: 6px; padding: .85rem 1rem; }
    86. 

  86. .gc-row-comments h3 { font-size: 1.125rem; margin: 0 0 .5rem; font-weight: 600; }
    87. 

  87. .gc-row-comments p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
    88. 

  88. .gc-list-empty { padding: 2rem !important; text-align: center; color: #52616f; }
    89. 

  89. .gc-list-load td { padding: .5rem; text-align: center; color: #52616f; font-size: 1rem; }
    90. 

  90. .gc-floating-table-head { position: fixed; z-index: 1020; overflow: hidden; pointer-events: none; box-shadow: 0 3px 7px #18263018; }
    91. 

  91. .gc-floating-table-head .gc-list-table { min-width: 0; }
    92. 

  92. .gc-list-summary { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1025; background: #edf1f4; border-top: 1px solid #b1bcc7; color: #182630; font-size: 1rem; box-shadow: 0 -2px 8px #18263008; }
    93. 

  93. .gc-summary-inner { width: calc(100% - 1.5rem); max-width: 1816px; margin: auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.5rem; padding: .8rem 1.25rem; }
    94. 

  94. .gc-summary-inner > div { display: flex; gap: .65rem; align-items: baseline; }
    95. 

  95. .gc-summary-total strong { font-size: 1.125rem; }
    96. 

  96. .gc-active-filters summary { cursor: pointer; font-weight: 600; }
    97. 

  97. .gc-active-filter-panel { position: absolute; bottom: calc(100% + .5rem); left: max(1rem, calc((100% - 1800px) / 2)); width: min(32rem, calc(100% - 2rem)); max-height: min(40vh, 20rem); overflow-y: auto; padding: 1rem; background: #fff; border: 1px solid #b1bcc7; border-radius: 8px; box-shadow: 0 4px 18px #18263020; }
    98. 

  98. .gc-active-filter-panel > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: .75rem; padding: .4rem 0; overflow-wrap: anywhere; }
    99. 

  99. .gc-active-filter-panel a { color: #354f63; }
    100. 

  100. @media (max-width: 1199.98px) {
    101. 

  101.   .gc-list-filters { grid-template-columns: 1fr; }
    102. 

  102.   .gc-filter-group + .gc-filter-group { padding: 1rem 0 0; border-left: 0; border-top: 1px solid #dce2e7; }
    103. 

  103.   .gc-filter-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    104. 

  104. }
    105. 

  105. @media (max-width: 575.98px) {
    106. 

  106.   .gc-list-page { padding: 1rem .5rem calc(var(--gc-summary-height) + 1rem); }
    107. 

  107.   .gc-list-filter-content { padding: .75rem; }
    108. 

  108.   .gc-filter-fields { grid-template-columns: minmax(0, 1fr); }
    109. 

  109.   .gc-summary-inner { padding: .6rem .75rem; gap: .5rem; font-size: .9375rem; }
    110. 

  110.   .gc-summary-total { flex: 1 1 100%; justify-content: space-between; }
    111. 

  111.   .gc-row-comments { grid-template-columns: minmax(0, 1fr); }
    112. 

  112. }
    113.