HLState/public/css/default.css

*
{
    /* apply defaults */
    margin: 0;
    padding: 0;

    /* allow draw */
    font-family: monospace;

    /* adaptive */
    color-scheme: light dark;

    /* vars */
    --container-max-width: 768px;
    --color-success: #4bc432;
    --color-warning: #f37b21;
    --color-error: #ff6363;
    --color-default: #999;
}

*::placeholder
{
    font-size: 12px;
}

hr {
    background-color: var(--color-default);
    border: none;
    color: var(--color-default);
    height: 1px;
    margin: 8px 0;
}

h1
{
    font-size: 14px;
}

h2
{
    font-size: 14px;
}

h3
{
    font-size: 13px;
}

a, a:active, a:visited
{
    color: var(--color-warning);
}

table
{
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--color-default);
}

table th,
table td
{
    border: 1px solid var(--color-default);
    padding: 4px;
}

ul
{
    margin-left: 16px;
}

header
{
    display: block;
    margin: 16px auto;
    max-width: var(--container-max-width);
    position: relative;
}

header > h1
{
    padding-right: 32px;
}

header > a:first-child
{
    position: absolute;
    top: -2px;
    right: 4px;
}

main
{
    display: block;
    margin: 16px auto;
    max-width: var(--container-max-width);
}

footer
{
    display: block;
    margin: 16px auto;
    max-width: var(--container-max-width);
    overflow: hidden;
    position: relative;
}

/* framework */
.cursor-default
{
    cursor: default;
}

.cursor-pointer
{
    cursor: pointer;
}

.cursor-help
{
    cursor: help;
}

.color-success,
a.color-success,
a.color-success:active,
a.color-success:visited
{
    color: var(--color-success);
}

.color-warning,
a.color-warning,
a.color-warning:active,
a.color-warning:visited
{
    color: var(--color-warning);
}

.color-error,
a.color-error,
a.color-error:active,
a.color-error:visited
{
    color: var(--color-error);
}

.color-default,
a.color-default,
a.color-default:active,
a.color-default:visited
{
    color: var(--color-default);
}

.text-align-left
{
    text-align: left;
}

.text-align-center
{
    text-align: center;
}

.text-align-right
{
    text-align: right;
}

.float-left
{
    float: left;
}

.float-right
{
    float: right;
}

.border-default
{
    border: 1px var(--color-default) solid;
}

.padding-8-px
{
    padding: 8px;
}

.padding-y-8-px
{
    padding-bottom: 8px;
    padding-top: 8px;
}

.margin-y-8-px
{
    margin-bottom: 8px;
    margin-top: 8px;
}