html {
background-color: #f0f0f0;
}
body {
margin: 0;
}
main {
background-color: #fff;
border: solid 1px rgb(191, 191, 191);
}
main,
header {
font-size: 12px;
font-family: sans-serif;
margin: 0;
margin-left: auto;
margin-right: auto;
max-width: 1024px;
}
header {
display: flex;
flex-direction: column;
}
button {
background-color: #fbfbfb;
border-color: rgb(191, 191, 191);
border-style: solid;
border-radius: 2px;
border-width: 1px;
color: black;
}
button:not([disabled]):hover {
background-color: #ededed;
}
header button {
margin-top: 5px;
margin-bottom: 5px;
align-self: flex-end;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
}
.result-row {
display: flex;
flex-direction: row;
padding-top: 5px;
padding-bottom: 5px;
min-height: 40px;
}
.result-row:not(:first-child) {
border-top: #bfbfbf 1px dashed;
}
.result-head {
background-color: #ececec;
}
.result-row span {
padding: 10px;
align-self: center;
}
.result-url {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
white-space: nowrap;
}
.result-row:not(.result-head) .result-url {
cursor: pointer;
}
.result-status {
min-width: 120px;
}
.result-cancel {
text-align: right;
width: 19px;
}
.result-cancel button {
background-color: #fbfbfb;
width: 19px;
padding: 0;
}
.no-result {
color: #888;
}
@media (prefers-color-scheme: dark) {
html {
background-color: #373737;
color: #fdfdfd;
}
main {
border-color: rgb(81, 81, 81);
}
main,
button {
background-color: #202023;
color: #fdfdfd;
}
.result-head {
background-color: #191919;
color: white;
}
.result-row {
color: #fdfdfd;
}
.no-result {
color: #888;
}
.result-cancel button {
color: #202023;
}
button:not([disabled]):hover {
color: #2A2A2E;
}
}