cronapp-framework-mobile-js/css/themes/custom/spacelab/bar-spacelab.css

Javascript library for CronApp's projects

.bar {
    border-bottom: 1px solid;
}

/* Default */
.bar.bar-default.bar-footer,
.bar.bar-default {
    background: linear-gradient(var(--colorLight10, #f2f2f2), var(--colorLight40, #eeeeee) 50%, var(--colorLight40, #aeaeae));
    border-color: var(--colorLight50);
}

.bar.bar-default .button .icon,
.bar.bar-default .button i,
.bar.bar-default .button span,
.bar.bar-default .title {
    color: var(--textColor40, #666666);
}

/* Positive */
.bar.bar-positive.bar-footer,
.bar.bar-positive {
    background: linear-gradient(var(--colorPrimary30, #b6b6b6), var(--colorPrimary40, #999999), var(--colorPrimary50, #868686));
    border-color: var(--colorPrimary50, #868686);
}

.bar.bar-positive .button .icon,
.bar.bar-positive .button i,
.bar.bar-positive .button span,
.bar.bar-positive .title {
    color: var(--textColorPrimary40, #ffffff);
}

/* Calm */
.bar.bar-calm.bar-footer,
.bar.bar-calm {
    background: linear-gradient(var(--colorCalm30, #83b6f6), var(--colorCalm40, #3399f3), var(--colorCalm50, #2d86d5));
    border-color: var(--colorCalm40, #3399f3);
}

.bar.bar-calm .button .icon,
.bar.bar-calm .button i,
.bar.bar-calm .button span,
.bar.bar-calm .title {
    color: var(--textColorCalm40, #ffffff);
}

/* assertive */
.bar.bar-assertive.bar-footer,
.bar.bar-assertive {
    background: linear-gradient(var(--colorDanger30, #da7b7b), var(--colorDanger40, #cd0200), var(--colorDanger50, #b30200));
    border-color: var(--colorDanger50, #b30200);
}

.bar.bar-assertive .button .icon,
.bar.bar-assertive .button i,
.bar.bar-assertive .button span,
.bar.bar-assertive .title {
    color: var(--textColorDanger40, #ffffff);
}

/* Energized */
.bar.bar-energized.bar-footer,
.bar.bar-energized {
    background: linear-gradient(var(--colorWarning30, #dfa07b), var(--colorWarning40, #d47500), var(--colorWarning50, #ba6600));
    border: 1px solid var(--colorWarning40, #d47500);
}

.bar.bar-energized .button .icon,
.bar.bar-energized .button i,
.bar.bar-energized .button span,
.bar.bar-energized .title {
    color: var(--textColorDanger40, #ffffff);
}

/* Balanced */
.bar.bar-balanced.bar-footer,
.bar.bar-balanced {
    background: linear-gradient(var(--colorSuccess30, #86c97f), var(--colorSuccess40, #3cb521), var(--colorSuccess50, #359e1d));
    border-color: var(--colorSuccess40, #3cb521);
}

.bar.bar-balanced .button .icon,
.bar.bar-balanced .button i,
.bar.bar-balanced .button span,
.bar.bar-balanced .title {
    color: var(--textColorSuccess40, #ffffff);
}

/* Royal */
.bar.bar-royal.bar-footer,
.bar.bar-royal {
    background: linear-gradient(var(--colorRoyal30, #ab9aef), var(--colorRoyal40, #886aea), var(--colorRoyal50, #775dcd));
    border-color: var(--colorRoyal40, #886aea);
}

.bar.bar-royal .button .icon,
.bar.bar-royal .button i,
.bar.bar-royal .button span,
.bar.bar-royal .title {
    color: var(--textColorRoyal40, #ffffff);
}

/* Light */
.bar.bar-light.bar-footer,
.bar.bar-light {
    background: linear-gradient(var(--colorLight30, #f2f2f2), var(--colorLight40, #eeeeee), var(--colorLight50, #d0d0d0));
    border-color: var(--colorLight40, #eeeeee);
}

.bar.bar-light .button .icon,
.bar.bar-light .button i,
.bar.bar-light .button span,
.bar.bar-light .title {
    color: var(--textColorLight40, #000000);
}

/* Stable */
.bar.bar-stable.bar-footer,
.bar.bar-stable {
    background: linear-gradient(var(--colorStable30, #fafafa), var(--colorStable40, #f8f8f8), var(--colorStable50, #d9d9d9));
    border-color: var(--colorStable40, #f8f8f8);
}

.bar.bar-stable .button .icon,
.bar.bar-stable .button i,
.bar.bar-stable .button span,
.bar.bar-stable .title {
    color: var(--textColorStable40, #444444);
}

/* Dark */
.bar.bar-dark.bar-footer,
.bar.bar-dark {
    background: linear-gradient(var(--colorDark30, #838383), var(--colorDark40, #333333), var(--colorDark50, #2d2d2d));
    border-color: var(--colorDark40, #333333);
}

.bar.bar-dark .button .icon,
.bar.bar-dark .button i,
.bar.bar-dark .button span,
.bar.bar-dark .title {
    color: var(--textColorDark40, #ffffff);
}