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;

    --background-color-hover-default: rgba(125, 125, 125, 0.1);
}

*::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;
}

table tr:hover td {
    background-color: var(--background-color-hover-default);
}

ul
{
    margin-left: 16px;
}

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

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);
}

.background-color-success
{
    background-color: var(--color-success);
}

.background-color-warning
{
    background-color: var(--color-warning);
}

.background-color-error
{
    background-color: var(--color-error);
}

.background-color-default
{
    background-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;
}

/*
 * yggverse/graph UI
 *
 * for any feedback visit official page:
 * https://github.com/YGGverse/graph-php
 *
 */

.calendar__month {
    overflow: hidden
}

.calendar__month > .day {
    float: left;
    height: 96px;
    margin: 2px 0;
    position: relative;
    width: 14.285714286%;
}

.calendar__month > .day:hover {
    background-color: var(--background-color-hover-default);
}

.calendar__month > .day > .number {
    background-color: var(--background-color-hover-default);
    border-radius: 50%;
    font-size: 10px;
    height: 16px;
    left: 4px;
    line-height: 16px;
    opacity: 0.8;
    position: absolute;
    text-align: center;
    top: 4px;
    width: 16px;
    z-index: 99;
}

.calendar__month > .day:hover > .number {
    opacity: 1;
}

.calendar__month > .day > .layer-0 > .label {
    background-color: var(--background-color-hover-default);
    border-radius: 3px;
    display: none;
    font-size: 10px;
    padding: 0 4px;
    position: absolute;
    right: 4px;
    top: 6px;
    z-index: 99;
}

.calendar__month > .day:hover > .layer-0 > .label {
    display: block;
}

.calendar__month > .day > .layer-0 > .value {
    bottom: 0;
    opacity: 0.5;
    position: absolute;
    z-index: 0;
}

.calendar__month > .day > .layer-1 > .label {
    display: none
}

.calendar__month > .day > .layer-1 > .value {
    bottom: 0;
    position: absolute;
    z-index: 1;
}

.calendar__month > .day > .layer-1 > .value:hover {
    opacity: .8;
}