126 lines
2.0 KiB
CSS
126 lines
2.0 KiB
CSS
|
|
:root {
|
|
font-family: 'Arial', sans-serif;
|
|
}
|
|
|
|
.client {
|
|
background-color: #F8F8F8;
|
|
border: 1px solid #C0C0C0;
|
|
border-radius: 4px;
|
|
padding: 0.5em;
|
|
margin: 2em 0;
|
|
}
|
|
|
|
.client > div {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 2em;
|
|
flex-wrap: wrap;
|
|
margin-top: 1.5em;
|
|
}
|
|
|
|
.client > span {
|
|
font-size: 0.75em;
|
|
color: #808080;
|
|
position: absolute;
|
|
}
|
|
|
|
.device {
|
|
background-color: #F0F0F0;
|
|
border: 1px solid #C0C0C0;
|
|
border-radius: 4px;
|
|
padding: 1em 1.5em;
|
|
flex: 0 1 260px;
|
|
}
|
|
|
|
.device.online {
|
|
background-color: #E0FFE0;
|
|
border-color: #80C080;
|
|
}
|
|
|
|
.device.inactive {
|
|
background-color: #E0E0E0;
|
|
border-color: #B0B0B0;
|
|
color: #808080 !important;
|
|
}
|
|
|
|
.device .name {
|
|
text-align: center;
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.device.online .name {
|
|
color: #008000;
|
|
}
|
|
|
|
.device .id {
|
|
text-align: center;
|
|
font-size: 0.75em;
|
|
color: #808080;
|
|
}
|
|
|
|
.device .date {
|
|
text-align: center;
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.device.online .date {
|
|
color: #008000;
|
|
}
|
|
|
|
.device .address {
|
|
text-align: center;
|
|
font-size: 0.75em;
|
|
color: #808080;
|
|
}
|
|
|
|
.device .versions {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.device:not(.inactive) .versions .deprecated {
|
|
color: #C00000;
|
|
}
|
|
|
|
img {
|
|
width: 1em;
|
|
height: 1em;
|
|
transform: translateY(0.125em);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
background-color: #000000;
|
|
color: #F0F0F0;
|
|
}
|
|
.client {
|
|
background-color: #080808;
|
|
border-color: #202020;
|
|
}
|
|
.device {
|
|
background-color: #101010;
|
|
border-color: #202020;
|
|
}
|
|
.device.online {
|
|
background-color: #002000;
|
|
border-color: #004000;
|
|
}
|
|
.device.inactive {
|
|
background-color: #181818;
|
|
border-color: #303030;
|
|
}
|
|
.device.online .name {
|
|
color: #00A000;
|
|
}
|
|
.device.online .date {
|
|
color: #00A000;
|
|
}
|
|
.device:not(.inactive) .versions .deprecated {
|
|
color: #E00000;
|
|
}
|
|
}
|