gin-status-report.pcss.css

Same filename and directory in other branches
  1. 11.x core/themes/default_admin/migration/css/base/gin-status-report.pcss.css
/* Unknown */
.upgrade-status-counter__status-icon--not-scanned::before,
.upgrade-status-summary tr.not-scanned > td.status-info::before {
  background-color: var(--gin-color-text);
  background-image: none;
  mask-image: var(--admin-icon-info);
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: 20px 20px;
}

/* Checked */
.system-status-counter__status-icon--checked::before,
.admin-dblog .dblog-info .icon,
.admin-dblog .dblog-notice .icon,
.system-status-report__status-icon--checked .details-title::before,
.details .system-status-report__status-icon--checked::before,
.gin-details .system-status-report__status-icon--checked::before,
.color-checked .system-status-report__status-title::before,
.upgrade-status-counter__status-icon--checked::before,
.upgrade-status-error-list tr.no-known-error > td.status-info::before,
.upgrade-status-summary tr.no-known-error > td.status-info::before,
#checked + .gin-details__wrapper--system-status-report .system-status-report__status-title::before {
  background-color: var(--gin-color-green);
  background-image: none;
  mask-image: var(--admin-icon-status);
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: 20px 20px;
}

/* Warning */
.system-status-counter__status-icon--warning::before,
.admin-dblog .dblog-warning .icon,
.system-status-report__status-icon--warning .details-title::before,
.details .system-status-report__status-icon--warning::before,
.gin-details .system-status-report__status-icon--warning::before,
.upgrade-status-counter__status-icon--warning::before,
.upgrade-status-error-list tr.known-warnings > td.status-info::before,
.upgrade-status-summary tr.known-warnings > td.status-info::before {
  background-color: var(--gin-color-warning);
  background-image: none;
  mask-image: var(--admin-icon-warning);
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: 20px 20px;
}

/* Error */
.system-status-counter__status-icon--error::before,
.admin-dblog .dblog-error .icon,
.admin-dblog .dblog-critical .icon,
.admin-dblog .dblog-alert .icon,
.admin-dblog .dblog-emergency .icon,
.system-status-report__status-icon--error .details-title::before,
.details .system-status-report__status-icon--error::before,
.gin-details .system-status-report__status-icon--error::before,
.upgrade-status-counter__status-icon--error::before,
.upgrade-status-error-list tr.known-errors > td.status-info::before,
.upgrade-status-summary tr.known-errors > td.status-info::before {
  background-color: var(--gin-color-danger);
  background-image: none;
  mask-image: var(--admin-icon-error);
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: 20px 20px;
}

.system-status-counter,
.upgrade-status-counter {
  height: auto;
  padding: var(--gin-spacing-m) 0;
  border-radius: var(--gin-border-m);
  background: var(--gin-bg-layer);
}

.system-status-counter__status-title,
.upgrade-status-counter__status-title {
  padding-inline-start: 0;
}

.system-status-counter__status-icon,
.upgrade-status-counter__status-icon {
  border-inline-end: 0 none;
  background-color: transparent;
  box-shadow: none;
}

.system-status-counter__status-icon--checked::before,
.system-status-counter__status-icon--warning::before,
.system-status-counter__status-icon--error::before,
.upgrade-status-counter__status-icon--checked::before,
.upgrade-status-counter__status-icon--warning::before,
.upgrade-status-counter__status-icon--error::before {
  mask-position: center 16px;
  mask-size: 32px 32px;
}

.system-status-counter__title-count,
.upgrade-status-counter__title-count {
  text-transform: none;
  color: var(--gin-color-title);
  font-weight: var(--gin-font-weight-semibold);
}

.system-status-general-info__header {
  margin-block-end: var(--gin-spacing-xs);
}

.system-status-general-info__items {
  border-block-end: 0 none;
}

.system-status-general-info__item {
  padding: var(--gin-spacing-m);
  background: transparent;
  box-shadow: none;
}

.system-status-general-info__item-title {
  color: var(--gin-color-title);
  font-size: var(--gin-font-size);
  font-weight: var(--gin-font-weight-semibold);
}

.system-status-general-info__sub-item-title {
  font-weight: var(--gin-font-weight-bold);

  &::after {
    content: ":\00a0";
  }
}

.system-status-general-info__item-icon--d8::before,
.system-status-general-info__item-icon--drupal::before {
  mask-image: var(--admin-icon-drupal);
}

.system-status-general-info__item-icon--clock::before {
  mask-image: var(--admin-icon-clock);
}

.system-status-general-info__item-icon--server::before {
  mask-image: var(--admin-icon-server);
}

.system-status-general-info__item-icon--php::before {
  mask-image: var(--admin-icon-php);
}

.system-status-general-info__item-icon--database::before {
  mask-image: var(--admin-icon-database);
}

.system-status-general-info__item-icon {
  &::before {
    background-color: var(--gin-color-primary);
    background-image: none;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: 32px 32px;
  }
}

.system-status-general-info__run-cron {
  &.button {
    margin: 0;
  }
}

.cron-description__run-cron {
  margin-block-start: var(--gin-spacing-m);
}

.system-status-report {
  margin-block-start: var(--gin-spacing-l);
}

.system-status-report-counters .system-status-report-counters__item {
  border: 1px solid var(--gin-border-color-layer);
  box-shadow: var(--gin-shadow-l1);
}

.system-status-report__status-title {
  color: var(--gin-color-title) !important;
  font-weight: var(--gin-font-weight-semibold);
}

.color-checked .system-status-report__status-title,
#checked + .gin-details__wrapper--system-status-report .system-status-report__status-title {
  &::before {
    position: absolute;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-inline-end: 10px;
    content: "";
    inset-block-start: 1em;
    inset-inline-start: 10px;
  }
}

.system-status-report__status-title .details-title::before,
.details .system-status-report__status-icon::before,
.gin-details .system-status-report__status-icon::before {
  width: 24px;
  height: 24px;
}

File

View on git.drupalcode.org

core/themes/default_admin/migration/css/base/gin-status-report.pcss.css

View source 
  1. /* Unknown */

  2. .upgrade-status-counter__status-icon--not-scanned::before,

  3. .upgrade-status-summary tr.not-scanned > td.status-info::before {

  4.   background-color: var(--gin-color-text);

  5.   background-image: none;

  6.   mask-image: var(--admin-icon-info);

  7.   mask-repeat: no-repeat;

  8.   mask-position: center center;

  9.   mask-size: 20px 20px;

  10. }

  11. 

  12. /* Checked */

  13. .system-status-counter__status-icon--checked::before,

  14. .admin-dblog .dblog-info .icon,

  15. .admin-dblog .dblog-notice .icon,

  16. .system-status-report__status-icon--checked .details-title::before,

  17. .details .system-status-report__status-icon--checked::before,

  18. .gin-details .system-status-report__status-icon--checked::before,

  19. .color-checked .system-status-report__status-title::before,

  20. .upgrade-status-counter__status-icon--checked::before,

  21. .upgrade-status-error-list tr.no-known-error > td.status-info::before,

  22. .upgrade-status-summary tr.no-known-error > td.status-info::before,

  23. #checked + .gin-details__wrapper--system-status-report .system-status-report__status-title::before {

  24.   background-color: var(--gin-color-green);

  25.   background-image: none;

  26.   mask-image: var(--admin-icon-status);

  27.   mask-repeat: no-repeat;

  28.   mask-position: center center;

  29.   mask-size: 20px 20px;

  30. }

  31. 

  32. /* Warning */

  33. .system-status-counter__status-icon--warning::before,

  34. .admin-dblog .dblog-warning .icon,

  35. .system-status-report__status-icon--warning .details-title::before,

  36. .details .system-status-report__status-icon--warning::before,

  37. .gin-details .system-status-report__status-icon--warning::before,

  38. .upgrade-status-counter__status-icon--warning::before,

  39. .upgrade-status-error-list tr.known-warnings > td.status-info::before,

  40. .upgrade-status-summary tr.known-warnings > td.status-info::before {

  41.   background-color: var(--gin-color-warning);

  42.   background-image: none;

  43.   mask-image: var(--admin-icon-warning);

  44.   mask-repeat: no-repeat;

  45.   mask-position: center center;

  46.   mask-size: 20px 20px;

  47. }

  48. 

  49. /* Error */

  50. .system-status-counter__status-icon--error::before,

  51. .admin-dblog .dblog-error .icon,

  52. .admin-dblog .dblog-critical .icon,

  53. .admin-dblog .dblog-alert .icon,

  54. .admin-dblog .dblog-emergency .icon,

  55. .system-status-report__status-icon--error .details-title::before,

  56. .details .system-status-report__status-icon--error::before,

  57. .gin-details .system-status-report__status-icon--error::before,

  58. .upgrade-status-counter__status-icon--error::before,

  59. .upgrade-status-error-list tr.known-errors > td.status-info::before,

  60. .upgrade-status-summary tr.known-errors > td.status-info::before {

  61.   background-color: var(--gin-color-danger);

  62.   background-image: none;

  63.   mask-image: var(--admin-icon-error);

  64.   mask-repeat: no-repeat;

  65.   mask-position: center center;

  66.   mask-size: 20px 20px;

  67. }

  68. 

  69. .system-status-counter,

  70. .upgrade-status-counter {

  71.   height: auto;

  72.   padding: var(--gin-spacing-m) 0;

  73.   border-radius: var(--gin-border-m);

  74.   background: var(--gin-bg-layer);

  75. }

  76. 

  77. .system-status-counter__status-title,

  78. .upgrade-status-counter__status-title {

  79.   padding-inline-start: 0;

  80. }

  81. 

  82. .system-status-counter__status-icon,

  83. .upgrade-status-counter__status-icon {

  84.   border-inline-end: 0 none;

  85.   background-color: transparent;

  86.   box-shadow: none;

  87. }

  88. 

  89. .system-status-counter__status-icon--checked::before,

  90. .system-status-counter__status-icon--warning::before,

  91. .system-status-counter__status-icon--error::before,

  92. .upgrade-status-counter__status-icon--checked::before,

  93. .upgrade-status-counter__status-icon--warning::before,

  94. .upgrade-status-counter__status-icon--error::before {

  95.   mask-position: center 16px;

  96.   mask-size: 32px 32px;

  97. }

  98. 

  99. .system-status-counter__title-count,

  100. .upgrade-status-counter__title-count {

  101.   text-transform: none;

  102.   color: var(--gin-color-title);

  103.   font-weight: var(--gin-font-weight-semibold);

  104. }

  105. 

  106. .system-status-general-info__header {

  107.   margin-block-end: var(--gin-spacing-xs);

  108. }

  109. 

  110. .system-status-general-info__items {

  111.   border-block-end: 0 none;

  112. }

  113. 

  114. .system-status-general-info__item {

  115.   padding: var(--gin-spacing-m);

  116.   background: transparent;

  117.   box-shadow: none;

  118. }

  119. 

  120. .system-status-general-info__item-title {

  121.   color: var(--gin-color-title);

  122.   font-size: var(--gin-font-size);

  123.   font-weight: var(--gin-font-weight-semibold);

  124. }

  125. 

  126. .system-status-general-info__sub-item-title {

  127.   font-weight: var(--gin-font-weight-bold);

  128. 

  129.   &::after {

  130.     content: ":\00a0";

  131.   }

  132. }

  133. 

  134. .system-status-general-info__item-icon--d8::before,

  135. .system-status-general-info__item-icon--drupal::before {

  136.   mask-image: var(--admin-icon-drupal);

  137. }

  138. 

  139. .system-status-general-info__item-icon--clock::before {

  140.   mask-image: var(--admin-icon-clock);

  141. }

  142. 

  143. .system-status-general-info__item-icon--server::before {

  144.   mask-image: var(--admin-icon-server);

  145. }

  146. 

  147. .system-status-general-info__item-icon--php::before {

  148.   mask-image: var(--admin-icon-php);

  149. }

  150. 

  151. .system-status-general-info__item-icon--database::before {

  152.   mask-image: var(--admin-icon-database);

  153. }

  154. 

  155. .system-status-general-info__item-icon {

  156.   &::before {

  157.     background-color: var(--gin-color-primary);

  158.     background-image: none;

  159.     mask-repeat: no-repeat;

  160.     mask-position: center center;

  161.     mask-size: 32px 32px;

  162.   }

  163. }

  164. 

  165. .system-status-general-info__run-cron {

  166.   &.button {

  167.     margin: 0;

  168.   }

  169. }

  170. 

  171. .cron-description__run-cron {

  172.   margin-block-start: var(--gin-spacing-m);

  173. }

  174. 

  175. .system-status-report {

  176.   margin-block-start: var(--gin-spacing-l);

  177. }

  178. 

  179. .system-status-report-counters .system-status-report-counters__item {

  180.   border: 1px solid var(--gin-border-color-layer);

  181.   box-shadow: var(--gin-shadow-l1);

  182. }

  183. 

  184. .system-status-report__status-title {

  185.   color: var(--gin-color-title) !important;

  186.   font-weight: var(--gin-font-weight-semibold);

  187. }

  188. 

  189. .color-checked .system-status-report__status-title,

  190. #checked + .gin-details__wrapper--system-status-report .system-status-report__status-title {

  191.   &::before {

  192.     position: absolute;

  193.     display: inline-block;

  194.     width: 24px;

  195.     height: 24px;

  196.     margin-inline-end: 10px;

  197.     content: "";

  198.     inset-block-start: 1em;

  199.     inset-inline-start: 10px;

  200.   }

  201. }

  202. 

  203. .system-status-report__status-title .details-title::before,

  204. .details .system-status-report__status-icon::before,

  205. .gin-details .system-status-report__status-icon::before {

  206.   width: 24px;

  207.   height: 24px;

  208. }

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