system-admin--modules.css

Same filename in other branches
  1. 9 core/themes/claro/css/components/system-admin--modules.css
  2. 8.9.x core/themes/claro/css/components/system-admin--modules.css
  3. 11.x core/themes/claro/css/components/system-admin--modules.css

System admin module: modules page.

File

core/themes/claro/css/components/system-admin--modules.css

View source
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/3084859
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * System admin module: modules page.
  10. */
  11. :root {
  12. --module-table-cell-padding-vertical: var(--space-m);
  13. --module-table-cell-padding-horizontal: calc(var(--space-m) - (var(--input-border-size) * 2));
  14. }
  15. .modules-table-filter,
  16. .permissions-table-filter {
  17. padding: 0.25rem var(--space-l);
  18. border: 1px solid var(--color-gray-200);
  19. border-radius: 2px 2px 0 0;
  20. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  21. }
  22. /* Visually hide the module filter input description. */
  23. .modules-table-filter .form-item__description,
  24. .permissions-table-filter .form-item__description {
  25. position: absolute !important;
  26. overflow: hidden;
  27. clip: rect(1px, 1px, 1px, 1px);
  28. width: 1px;
  29. height: 1px;
  30. word-wrap: normal;
  31. }
  32. .claro-details.claro-details--package-listing,
  33. .claro-details.module-list__module-details {
  34. margin-top: 2rem;
  35. margin-bottom: 0;
  36. border: none;
  37. box-shadow: none;
  38. }
  39. .claro-details__wrapper.claro-details__wrapper--package-listing {
  40. margin: 0;
  41. }
  42. .claro-details__summary.claro-details__summary--package-listing {
  43. color: var(--color-text);
  44. border-radius: 0.25rem;
  45. background: var(--color-gray-050);
  46. font-size: 1.125rem; /* 18px */
  47. line-height: 1.424rem; /* 23px */
  48. }
  49. .module-list {
  50. margin-top: 0;
  51. }
  52. .module-list__module {
  53. color: var(--color-text);
  54. border-bottom: 1px solid var(--color-gray-200);
  55. background: none;
  56. }
  57. .module-list__module:hover {
  58. background: none;
  59. }
  60. .module-list__module td {
  61. height: auto;
  62. padding: var(--module-table-cell-padding-vertical) var(--module-table-cell-padding-horizontal);
  63. vertical-align: top;
  64. }
  65. /* Set width only on wider view where description is visible by default. */
  66. @media screen and (min-width: 60em) {
  67. td.module-list__module {
  68. width: 25%;
  69. }
  70. }
  71. .module-list__module-name {
  72. font-weight: bold;
  73. }
  74. .module-list__checkbox {
  75. padding-left: 0.6875rem; /* LTR */
  76. text-align: left; /* LTR */
  77. }
  78. [dir="rtl"] .module-list__checkbox {
  79. padding-right: 0.6875rem;
  80. padding-left: var(--module-table-cell-padding-horizontal);
  81. text-align: right;
  82. }
  83. .module-list__checkbox .form-type--checkbox {
  84. margin: 0;
  85. line-height: var(--details-line-height);
  86. }
  87. .module-list__checkbox .form-checkbox:not([disabled]) {
  88. cursor: pointer;
  89. }
  90. td.module-list__checkbox {
  91. width: 4%;
  92. }
  93. td.module-list__description {
  94. padding-top: 0;
  95. padding-right: 0;
  96. padding-bottom: 0;
  97. }
  98. .claro-details.module-list__module-details {
  99. margin: 0;
  100. }
  101. .claro-details__summary.module-list__module-summary {
  102. padding-top: var(--module-table-cell-padding-vertical);
  103. padding-bottom: var(--module-table-cell-padding-vertical);
  104. font-weight: normal;
  105. line-height: var(--details-line-height);
  106. }
  107. .claro-details__summary.module-list__module-summary::before {
  108. top: calc(var(--space-m) + var(--space-s));
  109. }
  110. .module-details__description {
  111. font-size: var(--space-s);
  112. line-height: 0.9375rem;
  113. }
  114. .claro-details__wrapper.module-details__wrapper {
  115. margin-top: 0;
  116. margin-bottom: 0;
  117. }
  118. .module-details__requirements {
  119. margin-bottom: var(--space-m);
  120. }
  121. .module-details__links {
  122. position: relative;
  123. /* Negative margin matches the value of action link's top padding. */
  124. margin-top: calc((var(--space-s) - ((var(--space-l) - var(--space-s)) / 2)) * -1);
  125. margin-bottom: var(--space-m);
  126. }
  127. .module-details__links .action-link + .action-link {
  128. margin-left: 0; /* LTR */
  129. }
  130. [dir="rtl"] .module-details__links .action-link + .action-link {
  131. margin-right: 0;
  132. }
  133. .claro-details .tableresponsive-toggle {
  134. padding: var(--space-m) var(--space-m) var(--space-m) 0;
  135. }
  136. .claro-details .tableresponsive-toggle::before {
  137. /* This adjustment is necessary for better alignment with the adjacent button
  138. text. */
  139. position: relative;
  140. top: -1px;
  141. display: inline-block;
  142. width: calc(var(--space-m) * 2);
  143. height: 1.25rem;
  144. content: "";
  145. cursor: pointer;
  146. vertical-align: text-top;
  147. background: url("data:image/svg+xml,%3csvg height='16' stroke='%23545560' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e") no-repeat center;
  148. background-size: contain;
  149. }
  150. .claro-details .tableresponsive-toggle:hover {
  151. color: var(--color-absolutezero-hover);
  152. background-color: var(--color-bgblue-hover);
  153. }
  154. .claro-details .tableresponsive-toggle:hover::before {
  155. background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%230036b1' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
  156. }
  157. .claro-details .tableresponsive-toggle-columns button {
  158. margin-top: var(--space-xs);
  159. -webkit-text-decoration: none;
  160. text-decoration: none;
  161. color: var(--color-gray-800);
  162. font-weight: bold;
  163. }
  164. .claro-details .admin-missing {
  165. color: var(--color-maximumred);
  166. }

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