field-ui.admin.pcss.css

Replacement styles for Field UI admin.

File

core/themes/claro/css/theme/field-ui.admin.pcss.css

View source
  1. /**
  2. * @file
  3. * Replacement styles for Field UI admin.
  4. */
  5. /* 'Manage fields' and 'Manage display' overviews */
  6. .field-ui-overview .region-title td {
  7. font-weight: bold;
  8. }
  9. .field-ui-overview .region-message td {
  10. font-style: italic;
  11. }
  12. /* 'Manage form display' and 'Manage display' overview */
  13. .field-plugin-summary {
  14. float: left; /* LTR */
  15. font-size: var(--font-size-s);
  16. }
  17. [dir="rtl"] .field-plugin-summary {
  18. float: right;
  19. }
  20. .field-plugin-summary-cell .warning {
  21. display: block;
  22. float: left; /* LTR */
  23. margin-right: 0.5em; /* LTR */
  24. }
  25. [dir="rtl"] .field-plugin-summary-cell .warning {
  26. float: right;
  27. margin-right: 0;
  28. margin-left: 0.5em;
  29. }
  30. /* Settings edit. */
  31. .field-plugin-settings-edit-wrapper {
  32. position: relative;
  33. display: flex;
  34. align-items: center;
  35. justify-content: flex-end;
  36. }
  37. .field-plugin-settings-edit {
  38. width: var(--space-m);
  39. margin: 0;
  40. padding: 1px 8px;
  41. }
  42. .field-plugin-settings-edit-wrapper .ajax-progress--throbber {
  43. position: absolute;
  44. inset-block-start: 25px;
  45. margin-inline: 0;
  46. }
  47. /* Settings editing subform. */
  48. .draggable.field-plugin-settings-editing,
  49. .draggable.drag-previous.field-plugin-settings-editing {
  50. background: var(--color-blue-050);
  51. }
  52. .field-plugin-settings-editing td {
  53. vertical-align: top;
  54. }
  55. .field-plugin-settings-editing .field-plugin-type {
  56. display: none;
  57. }
  58. .field-plugin-settings-edit-form .plugin-name {
  59. font-weight: bold;
  60. }
  61. .field-settings-summary-cell.field-settings-summary-cell li,
  62. .storage-settings-summary-cell.storage-settings-summary-cell li {
  63. margin: 0;
  64. list-style-type: none;
  65. }
  66. .field-settings-summary-cell li {
  67. font-size: 0.9em;
  68. }
  69. .field-settings-summary-cell li:first-child {
  70. font-size: 1em;
  71. }
  72. .allowed-values-table .form-item:where(:not(.hidden)) {
  73. display: inline-table;
  74. }
  75. .field-label-wrapper {
  76. white-space: nowrap;
  77. }
  78. .field-label-wrapper .field-label-text,
  79. .field-label-wrapper .field-ui-secondary-text {
  80. display: inline;
  81. white-space: nowrap;
  82. }
  83. .field-machine-name {
  84. margin-left: 0.25rem;
  85. font-family: monospace;
  86. }
  87. .field-label-container .field-label-text {
  88. font-weight: 600;
  89. }
  90. .field-ui-secondary-text {
  91. margin-top: 0;
  92. color: var(--color-gray-600);
  93. font-size: 0.75rem;
  94. font-weight: 400;
  95. }
  96. .field-settings-summary-container {
  97. gap: 0;
  98. }
  99. .field-settings-summary-items {
  100. gap: 0;
  101. }
  102. .field-details-container {
  103. gap: 0.5rem;
  104. margin-top: 0.5rem;
  105. }
  106. .field-ui-pill {
  107. display: inline-block;
  108. padding: 0.25rem 0.75rem;
  109. letter-spacing: 0.025em;
  110. color: var(--color-gray-700);
  111. border: 1px solid var(--color-gray-300);
  112. border-radius: 0.75rem;
  113. background-color: var(--color-white);
  114. font-size: 0.75rem;
  115. font-weight: 600;
  116. line-height: 1;
  117. }
  118. .field-ui-overview td[data-drupal-selector*="details"] {
  119. text-align: left;
  120. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.