pimatic-angular-material-frontend/assets/css/style.css

Provides an AngularJS webinterface for Pimatic with material design.

/*
Please not that if you change some size value, it should be a multiple of 8 (or maybe 4)
See https://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-baseline-grids
*/

#toolbar-top {
    position: fixed;
}


.device-header .device-icon-wrapper {
    margin-right: 16px;
}

.device-header .device-icon {
    width: 40px;
    height: 40px;
    display: block;
    border-radius: 50%;
    box-sizing: content-box;
    background-color: rgba(0, 0, 0, 0.54);
    text-align: center;
}

/* See http://www.google.com/design/spec/components/cards.html#cards-content-blocks */
.device-header {
    padding: 16px;
}

.device-header:last-child {
    padding-bottom: 24px;
}

.device-header .device-icon i {
    font-size: 40px;
    color: rgba(255, 255, 255, 0.7);
}

.device-header .device-titles h1 {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    letter-spacing: 0.005em;
    margin: 0;
}

.device-header .device-titles h2 {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.54);
    line-height: 20px;
    font-weight: 500;
    letter-spacing: 0.005em;
    margin: 0;
}

.device-header .device-header-values {
    margin-left: 16px;
}

.device-header .device-header-values .device-header-value-large {
    font-size: 24px;
}



.device-header .device-header-values .device-switch {
    margin: 0;
}

.device-header .device-header-values .md-button {
    /* Margin is by default 6 and 8, card gets to large then */
    margin: 1px 0px;
}

md-card .md-actions .md-button{
    /* Default min-width is 88 px. It is decreased to make more buttons in a card availaible. */
    min-width: 72px;
}

.device-header .device-header-values md-slider {
    /* Height is by default 48, but card gets to large then */
    height: 40px;
}

.device-values .device-value{
    padding-left: 8px;
}

md-card-content:last-child {
    padding-bottom: 24px;
}

md-icon.mdi {
    font-size: 24px;
}

md-icon.mdi.mdi-large {
    font-size: 32px;
}

/** Fix for vertical allign */
a.md-fab md-icon {
    /*line-height: inherit;*/
}

/*
The floating action button should be placed 16dp minimum from the edge on mobile and 24dp minimum on tablet/desktop.
http://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-floating-action-button
*/
.md-button.md-fab-fixed {
    position: absolute;
    display: inline-block;
    bottom: 16px;
    right: 16px;
    -webkit-transition-property: background-color, box-shadow, bottom, right;
    transition-property: background-color, box-shadow, bottom, right;
}

.md-button.md-fab-fixed-desktop {
    bottom: 24px;
    right: 24px;
}

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

.login-card md-input-container{
    text-align: left;
}

/* Button group */
.button-group{
    margin: 6px 8px;
}

.button-group > .md-button{
    margin: 0;
}

.button-group > .md-button:not(:first-child){
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
}
.button-group > .md-button:not(:last-child){
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 0px;
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
}

.button-group.md-raised{
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.button-group.md-raised > .md-button{
    box-shadow: none;
}