system-admin--modules.css

Same filename in other branches
  1. 8.9.x core/themes/claro/css/components/system-admin--modules.css
  2. 10 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. .modules-table-filter {
  12. padding: 0.25rem 1.5rem;
  13. border: 1px solid #d3d4d9;
  14. border-radius: 2px 2px 0 0;
  15. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  16. }
  17. /* Visually hide the module filter input description. */
  18. .modules-table-filter .form-item__description {
  19. position: absolute !important;
  20. }
  21. .modules-table-filter .form-item__description {
  22. overflow: hidden;
  23. clip: rect(1px, 1px, 1px, 1px);
  24. width: 1px;
  25. height: 1px;
  26. word-wrap: normal;
  27. }
  28. .claro-details.claro-details--package-listing,
  29. .claro-details.module-list__module-details {
  30. margin-top: 2rem;
  31. margin-bottom: 0;
  32. border: none;
  33. box-shadow: none;
  34. }
  35. .claro-details__wrapper.claro-details__wrapper--package-listing {
  36. margin: 0;
  37. }
  38. .claro-details__summary.claro-details__summary--package-listing {
  39. color: #232429;
  40. border-radius: 0.25rem;
  41. background: #f3f4f9;
  42. font-size: 1.125rem; /* 18px */
  43. line-height: 1.424rem; /* 23px */
  44. }
  45. .module-list {
  46. margin-top: 0;
  47. }
  48. .module-list__module {
  49. color: #232429;
  50. border-bottom: 1px solid #d3d4d9;
  51. background: none;
  52. }
  53. .module-list__module:hover {
  54. background: none;
  55. }
  56. .module-list__module td {
  57. height: auto;
  58. padding: 1rem calc(1rem - 2px);
  59. vertical-align: top;
  60. }
  61. /* Set width only on wider view where description is visible by default. */
  62. @media screen and (min-width: 60em) {
  63. td.module-list__module {
  64. width: 25%;
  65. }
  66. }
  67. .module-list__module-name {
  68. font-weight: bold;
  69. }
  70. .module-list__checkbox {
  71. padding-left: 0.6875rem; /* LTR */
  72. text-align: left; /* LTR */
  73. }
  74. [dir="rtl"] .module-list__checkbox {
  75. padding-right: 0.6875rem;
  76. padding-left: calc(1rem - 2px);
  77. text-align: right;
  78. }
  79. .module-list__checkbox .form-type--checkbox {
  80. margin: 0;
  81. line-height: 1.295rem;
  82. }
  83. .module-list__checkbox .form-checkbox:not([disabled]) {
  84. cursor: pointer;
  85. }
  86. td.module-list__checkbox {
  87. width: 4%;
  88. }
  89. td.module-list__description {
  90. padding-top: 0;
  91. padding-right: 0;
  92. padding-bottom: 0;
  93. }
  94. .claro-details.module-list__module-details {
  95. margin: 0;
  96. }
  97. .claro-details__summary.module-list__module-summary {
  98. padding-top: 1rem;
  99. padding-bottom: 1rem;
  100. font-weight: normal;
  101. line-height: 1.295rem;
  102. }
  103. .claro-details__summary.module-list__module-summary::before {
  104. top: 1.75rem;
  105. }
  106. .module-details__description {
  107. font-size: 0.75rem;
  108. line-height: 0.9375rem;
  109. }
  110. .claro-details__wrapper.module-details__wrapper {
  111. margin-top: 0;
  112. margin-bottom: 0;
  113. }
  114. .module-details__requirements {
  115. margin-bottom: 1rem;
  116. }
  117. .module-details__links {
  118. position: relative;
  119. /* Negative margin matches the value of action link's top padding. */
  120. margin-top: -0.375rem;
  121. margin-bottom: 1rem;
  122. }
  123. .module-details__links .action-link + .action-link {
  124. margin-left: 0; /* LTR */
  125. }
  126. [dir="rtl"] .module-details__links .action-link + .action-link {
  127. margin-right: 0;
  128. }
  129. .claro-details .tableresponsive-toggle {
  130. padding: 1rem 1rem 1rem 0;
  131. }
  132. .claro-details .tableresponsive-toggle::before {
  133. /* This adjustment is necessary for better alignment with the adjacent button
  134. text. */
  135. position: relative;
  136. top: -1px;
  137. display: inline-block;
  138. width: 2rem;
  139. height: 1.25rem;
  140. content: "";
  141. cursor: pointer;
  142. vertical-align: text-top;
  143. 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;
  144. background-size: contain;
  145. }
  146. .claro-details .tableresponsive-toggle:hover {
  147. color: #0036b1;
  148. background-color: #f5f8ff;
  149. }
  150. .claro-details .tableresponsive-toggle:hover::before {
  151. 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");
  152. }
  153. .claro-details .tableresponsive-toggle-columns button {
  154. margin-top: 0.5rem;
  155. text-decoration: none;
  156. color: #55565b;
  157. font-weight: bold;
  158. }
  159. .claro-details .admin-missing {
  160. color: #dc2323;
  161. }

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