aleph1.co.uk Git - yaffs-website/blob - web/core/themes/seven/css/components/system-status-report-general-info.css

   1 /**
   2  * @file
   3  * Seven styles for the System Status general info.
   4  */
   5
   6 .system-status-general-info {
   7   border: 1px solid #ccc;
   8   border-radius: 3px;
   9 }
  10
  11 .system-status-general-info__header {
  12   background-color: #f5f5f2;
  13   padding: 10px;
  14   margin: 0;
  15   overflow: hidden;
  16   border-top-left-radius: 3px;
  17   border-top-right-radius: 3px;
  18   font-size: 14px;
  19   text-transform: uppercase;
  20 }
  21
  22 .system-status-general-info__item {
  23   background: #fcfcfa;
  24   border-top: 1px solid #ccc;
  25   padding: 10px 10px 20px;
  26   box-sizing: border-box;
  27   overflow-x: auto;
  28 }
  29
  30 .system-status-general-info__item-icon {
  31   display: inline-block;
  32   height: 45px;
  33   width: 45px;
  34   vertical-align: top;
  35 }
  36 .system-status-general-info__item-icon:before {
  37   content: "";
  38   background-size: 35px;
  39   background-position: 50% center;
  40   background-repeat: no-repeat;
  41   width: 100%;
  42   height: 100%;
  43   display: block;
  44 }
  45 .system-status-general-info__item-icon--d8:before {
  46   background-image: url(../../images/icons/cccccc/d8-logo.svg);
  47 }
  48 .system-status-general-info__item-icon--clock:before {
  49   background-image: url(../../images/icons/cccccc/clock.svg);
  50 }
  51 .system-status-general-info__item-icon--server:before {
  52   background-image: url(../../images/icons/cccccc/server.svg);
  53 }
  54 .system-status-general-info__item-icon--php:before {
  55   background-image: url(../../images/icons/cccccc/php-logo.svg);
  56   background-size: 45px;
  57 }
  58 .system-status-general-info__item-icon--database:before {
  59   background-image: url(../../images/icons/cccccc/database.svg);
  60   background-size: 30px;
  61 }
  62
  63 .system-status-general-info__item-details {
  64   box-sizing: border-box;
  65   display: inline-block;
  66   width: calc(100% - 60px);
  67   padding-left: 10px; /* LTR */
  68   position: relative;
  69 }
  70 [dir="rtl"] .system-status-general-info__item-details {
  71   padding-right: 10px;
  72   padding-left: 0;
  73 }
  74
  75 .system-status-general-info__item-title {
  76   margin-bottom: 0;
  77 }
  78
  79 .system-status-general-info__sub-item-title {
  80   margin: 0;
  81 }
  82
  83 .system-status-general-info__sub-item__title {
  84   font-weight: bold;
  85 }
  86 .system-status-general-info__sub-item__value {
  87   display: block;
  88 }
  89
  90 .system-status-general-info__run-cron {
  91   margin: 1em 0 0;
  92 }
  93
  94 @media screen and (min-width: 48em) {
  95   .system-status-general-info__items {
  96     display: flex;
  97     flex-wrap: wrap;
  98     overflow-x: hidden;
  99   }
 100
 101   .system-status-general-info__item {
 102     flex: 1;
 103     flex-basis: 33%;
 104     width: 33%;
 105   }
 106   .system-status-general-info__item:nth-child(2) {
 107     flex: 2;
 108     flex-basis: 66%;
 109   }
 110   .system-status-general-info__item:nth-child(2),
 111   .system-status-general-info__item:nth-child(4),
 112   .system-status-general-info__item:nth-child(5) {
 113     border-left: 1px solid #ccc; /* LTR */
 114   }
 115   [dir="rtl"] .system-status-general-info__item:nth-child(1),
 116   [dir="rtl"] .system-status-general-info__item:nth-child(3) {
 117     border-left: 1px solid #ccc;
 118   }
 119   [dir="rtl"] .system-status-general-info__item:nth-child(2),
 120   [dir="rtl"] .system-status-general-info__item:nth-child(5) {
 121     border-left: 0;
 122   }
 123
 124   .system-status-general-info__run-cron {
 125     margin: 15px 0 5px;
 126   }
 127 }
 128
 129 @media screen and (min-width: 60em) {
 130   .system-status-general-info__item-icon {
 131     width: 55px;
 132     height: 55px;
 133   }
 134   .system-status-general-info__item-icon:before {
 135     background-size: 35px;
 136   }
 137   .system-status-general-info__item-icon--php:before {
 138     background-size: 55px;
 139   }
 140
 141   .system-status-general-info__run-cron {
 142     position: absolute;
 143     top: 1em;
 144     right: 1em; /* LTR */
 145     margin-top: 0;
 146   }
 147   [dir="rtl"] .system-status-general-info__run-cron {
 148     left: 1em;
 149     right: auto;
 150   }
 151 }
 152
 153 @media screen and (max-width: 48em) {
 154   .system-status-general-info__header {
 155     display: none;
 156   }
 157   .system-status-general-info {
 158     border-top: 0;
 159     margin-top: 25px;
 160   }
 161 }