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