1  *
  2  {
  3      /* apply defaults */
  4      margin: 0;
  5      padding: 0;
  6  
  7      /* allow draw */
  8      font-family: monospace;
  9  
 10      /* adaptive */
 11      color-scheme: light dark;
 12  
 13      /* vars */
 14      --container-max-width: 768px;
 15      --color-success: #4bc432;
 16      --color-warning: #f37b21;
 17      --color-error: #ff6363;
 18      --color-default: #999;
 19  
 20      --background-color-hover-default: rgba(125, 125, 125, 0.1);
 21  }
 22  
 23  *::placeholder
 24  {
 25      font-size: 12px;
 26  }
 27  
 28  hr {
 29      background-color: var(--color-default);
 30      border: none;
 31      color: var(--color-default);
 32      height: 1px;
 33      margin: 8px 0;
 34  }
 35  
 36  h1
 37  {
 38      font-size: 14px;
 39  }
 40  
 41  h2
 42  {
 43      font-size: 14px;
 44  }
 45  
 46  h3
 47  {
 48      font-size: 13px;
 49  }
 50  
 51  a, a:active, a:visited
 52  {
 53      color: var(--color-warning);
 54  }
 55  
 56  table
 57  {
 58      width: 100%;
 59      border-collapse: collapse;
 60      border: 1px solid var(--color-default);
 61  }
 62  
 63  table th,
 64  table td
 65  {
 66      border: 1px solid var(--color-default);
 67      padding: 4px;
 68  }
 69  
 70  table tr:hover td {
 71      background-color: var(--background-color-hover-default);
 72  }
 73  
 74  ul
 75  {
 76      margin-left: 16px;
 77  }
 78  
 79  header
 80  {
 81      display: block;
 82      margin: 16px auto;
 83      max-width: var(--container-max-width);
 84      overflow: hidden;
 85      position: relative;
 86  }
 87  
 88  main
 89  {
 90      display: block;
 91      margin: 16px auto;
 92      max-width: var(--container-max-width);
 93  }
 94  
 95  footer
 96  {
 97      display: block;
 98      margin: 16px auto;
 99      max-width: var(--container-max-width);
100      overflow: hidden;
101      position: relative;
102  }
103  
104  /* framework */
105  .cursor-default
106  {
107      cursor: default;
108  }
109  
110  .cursor-pointer
111  {
112      cursor: pointer;
113  }
114  
115  .cursor-help
116  {
117      cursor: help;
118  }
119  
120  .color-success,
121  a.color-success,
122  a.color-success:active,
123  a.color-success:visited
124  {
125      color: var(--color-success);
126  }
127  
128  .color-warning,
129  a.color-warning,
130  a.color-warning:active,
131  a.color-warning:visited
132  {
133      color: var(--color-warning);
134  }
135  
136  .color-error,
137  a.color-error,
138  a.color-error:active,
139  a.color-error:visited
140  {
141      color: var(--color-error);
142  }
143  
144  .color-default,
145  a.color-default,
146  a.color-default:active,
147  a.color-default:visited
148  {
149      color: var(--color-default);
150  }
151  
152  .background-color-success
153  {
154      background-color: var(--color-success);
155  }
156  
157  .background-color-warning
158  {
159      background-color: var(--color-warning);
160  }
161  
162  .background-color-error
163  {
164      background-color: var(--color-error);
165  }
166  
167  .background-color-default
168  {
169      background-color: var(--color-default);
170  }
171  
172  .text-align-left
173  {
174      text-align: left;
175  }
176  
177  .text-align-center
178  {
179      text-align: center;
180  }
181  
182  .text-align-right
183  {
184      text-align: right;
185  }
186  
187  .float-left
188  {
189      float: left;
190  }
191  
192  .float-right
193  {
194      float: right;
195  }
196  
197  .border-default
198  {
199      border: 1px var(--color-default) solid;
200  }
201  
202  .padding-8-px
203  {
204      padding: 8px;
205  }
206  
207  .padding-y-8-px
208  {
209      padding-bottom: 8px;
210      padding-top: 8px;
211  }
212  
213  .margin-y-8-px
214  {
215      margin-bottom: 8px;
216      margin-top: 8px;
217  }
218  
219  /*
220   * yggverse/graph UI
221   *
222   * for any feedback visit official page:
223   * https://github.com/YGGverse/graph-php
224   *
225   */
226  
227  .calendar__month {
228      overflow: hidden
229  }
230  
231  .calendar__month > .day {
232      float: left;
233      height: 96px;
234      margin: 2px 0;
235      position: relative;
236      width: 14.285714286%;
237  }
238  
239  .calendar__month > .day:hover {
240      background-color: var(--background-color-hover-default);
241  }
242  
243  .calendar__month > .day > .number {
244      background-color: var(--background-color-hover-default);
245      border-radius: 50%;
246      font-size: 10px;
247      height: 16px;
248      left: 4px;
249      line-height: 16px;
250      opacity: 0.8;
251      position: absolute;
252      text-align: center;
253      top: 4px;
254      width: 16px;
255      z-index: 99;
256  }
257  
258  .calendar__month > .day:hover > .number {
259      opacity: 1;
260  }
261  
262  .calendar__month > .day > .layer-0 > .label {
263      background-color: var(--background-color-hover-default);
264      border-radius: 3px;
265      display: none;
266      font-size: 10px;
267      padding: 0 4px;
268      position: absolute;
269      right: 4px;
270      top: 6px;
271      z-index: 99;
272  }
273  
274  .calendar__month > .day:hover > .layer-0 > .label {
275      display: block;
276  }
277  
278  .calendar__month > .day > .layer-0 > .value {
279      bottom: 0;
280      opacity: 0.5;
281      position: absolute;
282      z-index: 0;
283  }
284  
285  .calendar__month > .day > .layer-1 > .label {
286      display: none
287  }
288  
289  .calendar__month > .day > .layer-1 > .value {
290      bottom: 0;
291      position: absolute;
292      z-index: 1;
293  }
294  
295  .calendar__month > .day > .layer-1 > .value:hover {
296      opacity: .8;
297  }