hue-callionica.css

:root {
    --back-color: 30,30,30;
    --button-color: 45,45,45;

    --text-color: 204,204,204;
    
    --lit-color: 240,213,78;
    /*--low-color: 164,139,14;*/
    --low-color: 160,220,251;
    --ready-color: 160,220,251;
    --unlit-color: var(--back-color);
}

* {
    box-sizing: border-box;
    border: 0;
    padding: 0;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: inherit;
}

body {
    -webkit-text-size-adjust: 100%;
    font-size: 14pt;
    padding: 8pt;
}

body[data-page='groups'] {
    -moz-user-select: none;
    -webkit-user-select: none;
    background-color: rgb(var(--back-color));
    color: rgb(var(--text-color));
}

body[data-page='groups'] a {
    background-color: rgb(var(--button-color));
}

body[data-disconnected='true'] a[href='hue-callionica-connect.html'] {
    background-color: yellow;
}

h1 {
    font-size: 18pt;
}
h2 {
    font-size: 16pt;
}
h3 {
    font-size: 15pt;
}
input {
    font-size: inherit;
}
a {
    color: inherit;
    background-color: silver;
    padding-left: 2pt;
    padding-right: 2pt;
    padding: 2pt;
    border-radius: 4pt;
    text-decoration: none;
}
ol {
    padding-left: 24pt;
}

h2 {
    margin-top: 4pt;
    margin-bottom: 4pt;
}
h3 {
    margin-top: 4pt;
    margin-bottom: 4pt;
}
p {
    margin-top: 8pt;
    margin-bottom: 8pt;
}
div {
    margin-top: 4pt;
    margin-bottom: 4pt;
}
hr {
    overflow: visible; /* For IE */
    padding: 0;
    margin-bottom: 12pt;
    margin-top: 12pt;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
}
.connection {
    border-radius: 8pt;
    padding: 8pt;
    margin: 8pt;
    background-color: whitesmoke;
}
.bridgename {
    font-size: 16pt;
    font-weight: bold;
}
.bridgeip {
    font-weight: bold;
}
.bridgeid {
    font-weight: bold;
}
.bridgestatus {
    font-weight: bold;
}
.token {
    font-weight: bold;
}
.unavailableip {
    font-weight: bold;
}
.connected {
    color: silver;
}
.connected::before {
    content: "Connected: ";
}
.property {
    font-weight: bold;
}
h2 {
    color: silver;
}
td {
    padding-left: 12pt;
}
select {
    -webkit-appearance: none;
    font-size: inherit;
    background: inherit;
}
option {
    -webkit-appearance: none;
    font-size: inherit;
    background: inherit;
}
button {
    font-size: inherit;
    padding: 4pt;
    border-radius: 4pt;
    background-color: silver;
    min-width: 48pt;
}
#pmz {
    border-radius: 8pt;
    padding: 8pt;
    margin: 8pt;
    background-color: whitesmoke;
}
#hardware {
    border-radius: 8pt;
    padding: 8pt;
    margin: 8pt;
    background-color: whitesmoke;
}
#zone {
    border-radius: 8pt;
    padding: 8pt;
    margin: 8pt;
    background-color: whitesmoke;
}
.scene {
    border-radius: 8pt;
    padding: 8pt;
    margin: 8pt;
    background-color: whitesmoke;
}
.configuration {
    border-radius: 8pt;
    padding: 8pt;
    margin: 8pt;
    background-color: whitesmoke;
}
.component {
    border-radius: 8pt;
    padding: 8pt;
    margin: 8pt;
    background-color: whitesmoke;
}

.group {
    -moz-user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    position: relative;
    border-radius: 8pt;
    margin-bottom: 0.75rem;

    border-width: 0.2rem;
    border-style: solid;
    border-color: rgb(var(--button-color));

    background-color: rgb(var(--button-color));
}

.group div {
    position: relative;
    margin: 0;
    padding-top: 0.5rem;
    /*margin-bottom: 0.5rem;*/
}

.group button {
    height: 4rem;
    width: 4rem;
    background-color: rgb(var(--button-color));
    border-width: 0.2rem;
    border-style: solid;
    border-color: rgb(var(--ready-color));
    color: rgb(var(--ready-color));

    /*box-shadow: 0.05rem 0.05rem 0.2rem 0 rgb(var(--back-color));*/
}

.group[data-power-level] button[data-action='toggle'] {
    border-radius: 0.75rem;
}

.group[data-power-management='0'] button[data-action='toggle'] {
    border-radius: 0.75rem 0.25rem 0.75rem 0.25rem;
}

.group[data-all-unreachable='true'] button[data-action='toggle'] {
    border-color: rgb(var(--unlit-color));
    color: rgb(var(--unlit-color));
}

.group button[data-action='toggle']::before {
    /* content: 'OFF'; */
    content: 'ON';
}

.group[data-turn-on='true'] button[data-action='toggle']::before {
    /* content: 'ON'; */
    content: 'OFF';
}

.group[data-power-level='1'] button[data-action='toggle']::before {
    /* content: 'ON'; */
    content: 'LOW';
}

.group button[data-action='toggleManagement']::before {
    /* content: 'OFF'; */
    content: 'ON';
}

.group[data-power-management='0'] button[data-action='toggleManagement']::before {
    /* content: 'ON'; */
    content: 'OFF';
}

.group button[data-action='toggleManagement'] {
    border-color: rgb(var(--lit-color));
    color: rgb(var(--lit-color));
}

.group[data-power-management='0'] button[data-action='toggleManagement'] {
    border-color: rgb(var(--ready-color));
    color: rgb(var(--ready-color));
}

.group[data-any-on='true'] button[data-action='toggle'] {
    border-color: rgb(var(--lit-color));
    color: rgb(var(--lit-color));
}

/*.group {
    border-width: 0;
    border-left-width: 0.5rem;
}

.group[data-any-on='true'] {
    border-width: 0;
    border-left-width: 0.5rem;
    border-color: rgb(var(--lit-color));
}*/

.group[data-power-level='1'] button[data-action='toggle'] {
    border-color: rgb(var(--low-color));
    color: rgb(var(--low-color));
}

.controls {
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    padding-top: 0.5rem;

    visibility: hidden;
    opacity: 0;

    transition: height 0.6s ease, margin 0.6s ease, opacity 0.6s ease, visibility 0.6s ease;

    position: relative;
}

.group[data-selected='true'] .controls {
    height: 9.5rem;
    margin: 0;
    overflow-x: scroll;
    visibility: visible;
    opacity: 1;
}

.group div:first-of-type {
    height: 4.5rem;
}

.group-name {
    position: absolute;
    height: 2rem;
    left: 0.75rem;
    top: 1.75rem;
}

.group-toggle {
    position: absolute;
    right: 0.5rem;
    height: 2rem;
}

.dimmer {
    position: absolute;
    right: 0.5rem;
    top: 5rem;
    font-size: 1.6rem;
}

.dimmer button {
    padding: 0;
    min-width: 3rem;
}

.dimmer button[data-button='1000'] {
    border-radius: 0.4rem 0rem 0rem 0.4rem;
}

.dimmer button[data-button='2000'] {
    border-radius: 0;
    border-left: 0;
    width: 3.6rem;
}

.dimmer button[data-button='3000'] {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    width: 3.4rem;
}

.dimmer button[data-button='4000'] {
    border-radius: 0.0rem 0.4rem 0.4rem 0rem;
}

.metadata {
    color: whitesmoke;
}
.add-schedule {
    background-color: white;
}

.add-schedule select {
    font-style: italic;
}

.add-schedule input {
    font-style: italic;
}

.highlight {
    background-color: white;
}

#connection {
    height: 0;
    visibility: hidden;
    transition: height 0.6s ease;
}

body[data-show-connection='true'] #connection {
    visibility: visible;
    height: 4rem;
}