homebridge-homeconnect/dist/homebridge-ui/public/style.css

A Homebridge plugin that connects Home Connect appliances to Apple HomeKit

/* Homebridge plugin for Home Connect home appliances */
/* Copyright © 2023-2026 Alexander Thoukydides */

/* Avoid unintentional scrollbars */

body {
    overflow:       hidden;
}

/* Transitions for collapsible alerts */

.hc-foldable {
    overflow:           clip;
    transform:          scaleY(1);
    transform-origin:   top;
    transition:         all 1s ease-in-out;
    max-height:         100%;
    opacity:            1
}

.hc-foldable[hidden] {
    display:        block !important;
    visibility:     visible;
    transform:      scaleY(0);
    max-height:     0;
    opacity:        0;
}

/* Home Connect API status */

#hc-api-svg {
    text-align:     center;
    padding:        14px;
}

/* Home Connect client authoriation */

.hc-client img {
    height:         75px;
}

#hc-client-user-progress {
    width:          100%;
    transition:     none;
}

#hc-client-user-progress.hc-progress-zero {
    width:                      0%;
    transition-property:        width;
    transition-timing-function: linear;
}

/* Restart required */

#hc-modified .hc-scroll-x {
    overflow-x:     auto;
}

#hc-modified tbody :is(th, td) {
    font-family:    var(--font-family-monospace);
    font-size:      0.7rem;
    padding-top:    3px;
    padding-bottom: 3px;
    white-space:    pre;
}

#hc-modified tbody th {
    white-space:    pre-wrap;
}

/* Cards listing global options and appliances */

#hc-appliance-cards .col {
    padding:        5px;
    display:        flex;
}

#hc-appliance-cards .card {
    flex-grow:      1;
}

#hc-appliance-cards .card:active {
	transform:      translate(3px, 3px);
}

#hc-appliance-cards .card-body {
    padding:        5px 5px 0px;
    text-align:     center;
    font-weight:    200 !important;
    transition:     all 0.35s;
}

#hc-appliance-cards .card-footer {
    padding:        0px 5px;
    text-align:     center;
    font-size:      0.7rem;
    font-variant:   small-caps;
}

#hc-appliance-cards .card-icon {
    margin:         auto;
    padding:        10px;
}

#hc-appliance-cards .card-icon svg {
    width:          100px;
    height:         100px;
}

#hc-appliance-cards svg :is(.active-bg, .active-fg) {
    opacity:        0;
    transition:     all 0.35s;
}

#hc-appliance-cards :is(.card:hover, .hc-selected) svg .active-fg {
    opacity:        1;
    filter:         drop-shadow(0 0 3px rgb(255, 255, 255));
}

#hc-appliance-cards :is(.card:hover, .hc-selected) svg .active-bg {
    opacity:        1;
}

#hc-appliance-cards :is(.card:hover) svg .active-bg {
    filter:         brightness(1.1);
}

#hc-appliance-cards :is(.card:hover, .hc-selected) .card-body {
    font-weight:    700 !important;
}