global.scss

/*
 * App Global CSS
 * ----------------------------------------------------------------------------
 * Put style rules here that you want to apply globally. These styles are for
 * the entire app and not just one component. Additionally, this file can be
 * used as an entry point to import other CSS/Sass files to be included in the
 * output CSS.
 * For more information on global stylesheets, visit the documentation:
 * https://ionicframework.com/docs/layout/global-stylesheets
 */

/* Core CSS required for Ionic components to work properly */
@import "font-roboto.css";

@import "~@ionic/angular/css/core.css";

/* Basic CSS for apps built with Ionic */
@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
@import '~@ionic/angular/css/display.css';

/* Optional CSS utils that can be commented out */
@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";


.primary {
    color: var(--ion-color-primary);
}

* {
    user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

textarea,
input {
    user-select: initial;
    -webkit-user-select: initial;
    -khtml-user-select: initial;
    -moz-user-select: initial;
    -ms-user-select: initial;
}

input:read-only {
    cursor: default;
}

.notif-error {
    z-index: 60003;
    --background: white;
    --color: var(--ion-color-danger);
    --border-color: var(--ion-color-danger);
    --border-width: 1px;
    --border-style: solid;
    text-align: center;
    font-weight: bold;
}

.notif-success {
    z-index: 60003;
    --background: white;
    --color: var(--ion-color-success);
    --border-color: var(--ion-color-success);
    --border-width: 1px;
    --border-style: solid;
    text-align: center;
    font-weight: bold;
}

.notif-primary {
    z-index: 60003;
    --background: white;
    --color: var(--ion-color-primary);
    --border-color: var(--ion-color-primary);
    --border-width: 1px;
    --border-style: solid;
    text-align: center;
    font-weight: bold;
}

.fullscreen {
    --width: 100%;
    --height: 100%;
}

.profileCss {
    @media screen and (min-width: 768px) and (min-height: 768px) {
        --width: 56%;
        --height: 600px
    }
    @media screen and (min-width: 768px) and (min-height: 600px) {
        --width: 56%;
        --height: 600px
    }
}

.aboutUsCss {
    --width: 60%;
    --height: 85%;
}

ion-icon {
    pointer-events: none;
}

.info {
    border-left: solid 3px var(--ion-color-primary);
    --background: rgba(var(--ion-color-primary-rgb), 0.2);
    border-radius: 0px;
    --color: var(--ion-color-primary);
}


.info-danger {
    border-left: solid 3px var(--ion-color-danger);
    --background: rgba(var(--ion-color-danger-rgb), 0.2);
    border-radius: 0px;
    --color: var(--ion-color-danger);
}

.alert-wrapper {

    .alert-message {
        text-align: left;
        margin-bottom: 0px;
        padding-bottom: 0px;
    }

    .alert-title {
        color: var(--ion-color-primary-tint);
    }

    .alert-button {
        margin-top: 5px;
        color: var(--ion-color-primary);
        display: flex;
        width: 100%;
        border: solid 1px;
        border-radius: 64px;
    }

    .alert-button-role-cancel {
        color: var(--ion-color-medium);
    }


    .alert-button-inner {
        justify-content: center;
    }
}

.custom-alert-danger .alert-wrapper {
    border: solid 1px var(--ion-color-danger);

    .alert-title {
        color: var(--ion-color-danger-tint);
    }

    .alert-button {
        color: var(--ion-color-danger);
        display: flex;
        width: 100%;
        border: solid 1px;
        border-radius: 64px;
    }

    .alert-button-inner {
        justify-content: center;
    }
}

.custom-alert-success .alert-wrapper {
    border: solid 1px var(--ion-color-success);

    .alert-title {
        color: var(--ion-color-success-tint);
    }

    .alert-button {
        color: var(--ion-color-success);
        display: flex;
        width: 100%;
        border: solid 1px;
        border-radius: 64px;
    }

    .alert-button-inner {
        justify-content: center;
    }
}

.custom-alert-fullscreen {
    --width: 100%;
    --height: 100%;
}

.footer-buttons {
    padding: 10px;
    display: flex;
    justify-content: center;

    ion-button {
        margin: auto;
        margin-left: 10px;
        margin-right: 10px;
        width: 150px;
    }

    ion-label {
        font-size: 13px;
    }
}