echoip/html/styles.html

<style>
.ip,pre {
    word-wrap: break-word
}

pre {
    font-family: "Monaco","Menlo","Consolas","Courier New",monospace;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap
}

a {
    text-decoration: underline;
    color: #000
}

a:hover,active {
    background: #d7d7d7
}

.ip {
    border: 1px solid #cbcbcb;
    background: #f2f2f2;
    font-size: 36px;
    padding: 6px
}

svg.github-corner {
    fill: #151513;
    color: #fff
}

.footer {
    margin-top: 34px;
    border-top: 1px solid #cbcbcb
}

.content {
    margin-left: auto;
    margin-right: auto;
    padding-left: 1em;
    padding-right: 1em;
    max-width: 1024px
}

.center {
    justify-content: center
}

.info-table td,.info-table th {
    padding: 5px;
    border: 2px solid #ababab;
    word-wrap: break-word
}

.info-table th[scope=row] {
    background-color: #d5d5d5;
    text-align: left
}

.widgetbox {
    width: 100%;
    padding: .5rem;
    border: 1px solid gray;
    font-family: "Courier New",Courier,monospace;
    margin-top: .5rem;
    box-sizing: border-box
}

.widgetbox.input :first-child::before {
    content: "$ ";
    white-space: pre
}

.widgetbox.output {
    min-height: 4em;
    white-space: pre;
    overflow-x: scroll
}

.l-box {
    margin: 0 1rem
}

.align-right {
    text-align: right
}

.medium-input {
    width: 10em
}

button.selected {
    background-color: rgb(208 208 208)
}

.input-buttons {
    line-height: 2.6em;
    font-size: smaller
}

.leafcloud-logo .letters {
    fill: #000
}

@media (prefers-color-scheme:dark) {
    .pure-g [class*=pure-u],a,html {
        background-color: #161719;
        color: #d8d9da
    }

    .ip {
        border: 1px solid #313233;
        background: #212223
    }

    .footer {
        color: #8e8e8e!important;
        border-top: 1px solid #313233
    }

    a:hover,active {
        background: #3d3e3f
    }

    svg.github-corner {
        fill: #f8f9fa;
        color: #161719
    }

    .info-table th[scope=row] {
        text-align: left
    }

    .info-table th[scope=row],.pure-button {
        background-color: #2e2e2e;
        color: #dcdcdc
    }

    .pure-button.selected {
        background-color: rgb(125 125 125)
    }

    .pure-input {
        background-color: #e6e6e6;
        color: #666
    }

    .pure-input::placeholder {
        color: #bbb
    }

    .leafcloud-logo .letters {
        fill: #fff;
        max-width: 100%
    }
}

@media (min-width:768px) {
    .leafcloud-placement {
        text-align: right
    }

    .leafcloud-logo {
        height: 80px;
        margin: 2em 0-.5em
    }
}

@media (max-width:768px) {
    .leafcloud-logo {
        margin-right: 1em
    }
}

.debug {
    outline: 1px dotted pink
}
</style>