cronapp-framework-mobile-js/css/themes/custom/theme-general/theme-general.css

Javascript library for CronApp's projects

@import 'button.css';
@import 'input.css';
@import 'crn-ion-header-bar.css';
@import 'crn-ion-segment.css';
@import 'login.css';
@import 'signup.css';
@import 'reset-password.css';
@import 'checkbox.css';
@import 'toggle.css';
@import 'modal.css';

body {
    font-family: var(--fontFamily, "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI", sans-serif);
    color: var(--textColor40, #111111);
    font-size: var(--textNormalSize, 16px);
}

textarea.item {
    border-width: 1px 0;
}

.item-input .icon {
    font-size: var(--iconSizeSmall, 25px);
}

label,
input,
button,
select,
textarea textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
    font-family: var(--fontFamily, "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI", sans-serif);
    font-size: var(--textNormalSize, 16px);
}

.item-complex .item-content,
.item-radio .item-content,
.pane,
.view {
    background: var(--backgroundColor40, #ffffff);
}

a,
p,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: var(--textColor40, #3b448e);
}

h1,
.h1 {
    font-size: var(--textFullSize, 36px);
}

h2,
.h2 {
    font-size: var(--textExtraBigSize, 30px);
}

h3,
.h3 {
    font-size: var(--textBigSize, 24px);
}

h4,
.h4 {
    font-size: var(--textMediumSize, 18px);
}

h5,
.h5 {
    font-size: var(--textNormalSize, 14px);
}

h6,
.h6 {
    font-size: var(--textSmallSize, 12px);
}

p,
label,
a,
input,
.item {
    font-size: var(--textNormalSize, 14px);
    color: var(--textColor40, #393939);
}

.slider-pager .slider-pager-page {
    width: auto;
}

a:hover {
    color: var(--textColor60, #353b40);
}

.item.active,
.item.activated,
.item-complex.active .item-content,
.item-complex.activated .item-content,
.item .item-content.active,
.item .item-content.activated {
    background: var(--backgroundColor50, #dfdfdf);
}

.has-header .scroll {
    background: transparent;
}

/* Colors */

.default,
a.default {
    color: var(--colorDefault40, #3b448e);
}

.default-bg {
    background: var(--colorDefault40, #3b448e);
}

.default-border {
    border-color: var(--colorDefault50);
}

.light,
a.light {
    color: var(--colorLight40, #ffffff);
}

.light-bg {
    background: var(--colorLight40, #ffffff);
}

.light-border {
    border-color: var(--colorLight50, #dfdfdf);
}

.stable,
a.stable {
    color: var(--colorStable40, #f8f8f8);
}

.stable-bg {
    background: var(--colorStable40, #f8f8f8);
}

.stable-border {
    border-color: var(--colorStable50, #d9d9d9);
}

.positive,
a.positive {
    color: var(--colorPrimary40, #387ef5);
}

.positive-bg {
    background: var(--colorPrimary40, #387ef5);
}

.positive-border {
    border-color: var(--colorPrimary50);
}

.calm,
a.calm {
    color: var(--colorCalm40, #11c1f3);
}

.calm-bg {
    background: var(--colorCalm40, #11c1f3);
}

.calm-border {
    border-color: var(--colorCalm50);
}

.assertive,
a.assertive {
    color: var(--colorDanger40, #ef473a);
}

.assertive-bg {
    background: var(--colorDanger40, #ef473a);
}

.assertive-border {
    border-color: var(--colorDanger50);
}

.balanced,
a.balanced {
    color: var(--colorSuccess40, #33cd5f);
}

.balanced-bg {
    background: var(--colorSuccess40, #33cd5f);
}

.balanced-border {
    border-color: var(--colorSuccess50);
}

.energized,
a.energized {
    color: var(--colorWarning40, #ffc900);
}

.energized-bg {
    background: var(--colorWarning40, #ffc900);
}

.energized-border {
    border-color: var(--colorWarning50);
}

.royal,
a.royal {
    color: var(--colorRoyal40, #886aea);
}

.royal-bg {
    background: var(--colorRoyal40, #886aea);
}

.royal-border {
    border-color: var(--colorRoyal50);
}

.dark,
a.dark {
    color: var(--colorDark40, #444444);
}

.dark-bg {
    background: var(--colorDark40, #444444);
}

.dark-border {
    border-color: var(--colorDark50);
}