doneit-web/src/theme/variables.scss

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@import "~@angular/material/theming";
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$app-primary: mat-palette($mat-indigo);
$app-accent: mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$app-warn: mat-palette($mat-red);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$app-theme: mat-light-theme(
  (
    color: (
      primary: $app-primary,
      accent: $app-accent,
      warn: $app-warn,
    ),
  )
);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($app-theme);

// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/theming/

/** Ionic CSS Variables **/
:root {
  /** primary **/
  --ion-color-primary: #3880ff;
  --ion-color-primary-rgb: 56, 128, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #3171e0;
  --ion-color-primary-tint: #4c8dff;

  /** secondary **/
  --ion-color-secondary: #3dc2ff;
  --ion-color-secondary-rgb: 61, 194, 255;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #36abe0;
  --ion-color-secondary-tint: #50c8ff;

  /** tertiary **/
  --ion-color-tertiary: #5260ff;
  --ion-color-tertiary-rgb: 82, 96, 255;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #4854e0;
  --ion-color-tertiary-tint: #6370ff;

  /** success **/
  --ion-color-success: #2dd36f;
  --ion-color-success-rgb: 45, 211, 111;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 255, 255, 255;
  --ion-color-success-shade: #28ba62;
  --ion-color-success-tint: #42d77d;

  /** warning **/
  --ion-color-warning: #ffc409;
  --ion-color-warning-rgb: 255, 196, 9;
  --ion-color-warning-contrast: #000000;
  --ion-color-warning-contrast-rgb: 0, 0, 0;
  --ion-color-warning-shade: #e0ac08;
  --ion-color-warning-tint: #ffca22;

  /** danger **/
  --ion-color-red: #d30a0a;
  --ion-color-danger: #eb445a;
  --ion-color-danger-rgb: 235, 68, 90;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #cf3c4f;
  --ion-color-danger-tint: #ed576b;

  /** dark **/
  --ion-color-dark: #222428;
  --ion-color-dark-rgb: 34, 36, 40;
  --ion-color-dark-contrast: #ffffff;
  --ion-color-dark-contrast-rgb: 255, 255, 255;
  --ion-color-dark-shade: #1e2023;
  --ion-color-dark-tint: #383a3e;

  /** medium **/
  --ion-color-medium: #92949c;
  --ion-color-medium-rgb: 146, 148, 156;
  --ion-color-medium-contrast: #ffffff;
  --ion-color-medium-contrast-rgb: 255, 255, 255;
  --ion-color-medium-shade: #808289;
  --ion-color-medium-tint: #9d9fa6;

  /** light **/
  --ion-color-light: #f4f5f8;
  --ion-color-light-rgb: 244, 245, 248;
  --ion-color-light-contrast: #000000;
  --ion-color-light-contrast-rgb: 0, 0, 0;
  --ion-color-light-shade: #d7d8da;
  --ion-color-light-tint: #f5f6f9;

  --ion-color-expediente: #dae3f3;
}

@media (prefers-color-scheme: dark) {
  /*
   * Dark Colors
   * -------------------------------------------
   */

  body {
    --ion-color-primary: #428cff;
    --ion-color-primary-rgb: 66, 140, 255;
    --ion-color-primary-contrast: #ffffff;
    --ion-color-primary-contrast-rgb: 255, 255, 255;
    --ion-color-primary-shade: #3a7be0;
    --ion-color-primary-tint: #5598ff;

    --ion-color-secondary: #50c8ff;
    --ion-color-secondary-rgb: 80, 200, 255;
    --ion-color-secondary-contrast: #ffffff;
    --ion-color-secondary-contrast-rgb: 255, 255, 255;
    --ion-color-secondary-shade: #46b0e0;
    --ion-color-secondary-tint: #62ceff;

    --ion-color-tertiary: #6a64ff;
    --ion-color-tertiary-rgb: 106, 100, 255;
    --ion-color-tertiary-contrast: #ffffff;
    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
    --ion-color-tertiary-shade: #5d58e0;
    --ion-color-tertiary-tint: #7974ff;

    --ion-color-success: #2fdf75;
    --ion-color-success-rgb: 47, 223, 117;
    --ion-color-success-contrast: #000000;
    --ion-color-success-contrast-rgb: 0, 0, 0;
    --ion-color-success-shade: #29c467;
    --ion-color-success-tint: #44e283;

    --ion-color-warning: #ffd534;
    --ion-color-warning-rgb: 255, 213, 52;
    --ion-color-warning-contrast: #000000;
    --ion-color-warning-contrast-rgb: 0, 0, 0;
    --ion-color-warning-shade: #e0bb2e;
    --ion-color-warning-tint: #ffd948;

    --ion-color-danger: #ff4961;
    --ion-color-danger-rgb: 255, 73, 97;
    --ion-color-danger-contrast: #ffffff;
    --ion-color-danger-contrast-rgb: 255, 255, 255;
    --ion-color-danger-shade: #e04055;
    --ion-color-danger-tint: #ff5b71;

    --ion-color-dark: #f4f5f8;
    --ion-color-dark-rgb: 244, 245, 248;
    --ion-color-dark-contrast: #000000;
    --ion-color-dark-contrast-rgb: 0, 0, 0;
    --ion-color-dark-shade: #d7d8da;
    --ion-color-dark-tint: #f5f6f9;

    --ion-color-medium: #989aa2;
    --ion-color-medium-rgb: 152, 154, 162;
    --ion-color-medium-contrast: #000000;
    --ion-color-medium-contrast-rgb: 0, 0, 0;
    --ion-color-medium-shade: #86888f;
    --ion-color-medium-tint: #a2a4ab;

    --ion-color-light: #222428;
    --ion-color-light-rgb: 34, 36, 40;
    --ion-color-light-contrast: #ffffff;
    --ion-color-light-contrast-rgb: 255, 255, 255;
    --ion-color-light-shade: #1e2023;
    --ion-color-light-tint: #383a3e;

    --ion-color-expediente: #dae3f3;
  }

  /*
   * iOS Dark Theme
   * -------------------------------------------
   */

  .ios body {
    --ion-background-color: #000000;
    --ion-background-color-rgb: 0, 0, 0;

    --ion-text-color: #ffffff;
    --ion-text-color-rgb: 255, 255, 255;

    --ion-color-step-50: #0d0d0d;
    --ion-color-step-100: #1a1a1a;
    --ion-color-step-150: #262626;
    --ion-color-step-200: #333333;
    --ion-color-step-250: #404040;
    --ion-color-step-300: #4d4d4d;
    --ion-color-step-350: #595959;
    --ion-color-step-400: #666666;
    --ion-color-step-450: #737373;
    --ion-color-step-500: #808080;
    --ion-color-step-550: #8c8c8c;
    --ion-color-step-600: #999999;
    --ion-color-step-650: #a6a6a6;
    --ion-color-step-700: #b3b3b3;
    --ion-color-step-750: #bfbfbf;
    --ion-color-step-800: #cccccc;
    --ion-color-step-850: #d9d9d9;
    --ion-color-step-900: #e6e6e6;
    --ion-color-step-950: #f2f2f2;

    --ion-toolbar-background: #0d0d0d;

    --ion-item-background: #000000;

    --ion-card-background: #1c1c1d;

    --ion-color-expediente: #dae3f3;
  }

  /*
   * Material Design Dark Theme
   * -------------------------------------------
   */

  .md body {
    --ion-background-color: #121212;
    --ion-background-color-rgb: 18, 18, 18;

    --ion-text-color: #ffffff;
    --ion-text-color-rgb: 255, 255, 255;

    --ion-border-color: #222222;

    --ion-color-step-50: #1e1e1e;
    --ion-color-step-100: #2a2a2a;
    --ion-color-step-150: #363636;
    --ion-color-step-200: #414141;
    --ion-color-step-250: #4d4d4d;
    --ion-color-step-300: #595959;
    --ion-color-step-350: #656565;
    --ion-color-step-400: #717171;
    --ion-color-step-450: #7d7d7d;
    --ion-color-step-500: #898989;
    --ion-color-step-550: #949494;
    --ion-color-step-600: #a0a0a0;
    --ion-color-step-650: #acacac;
    --ion-color-step-700: #b8b8b8;
    --ion-color-step-750: #c4c4c4;
    --ion-color-step-800: #d0d0d0;
    --ion-color-step-850: #dbdbdb;
    --ion-color-step-900: #e7e7e7;
    --ion-color-step-950: #f3f3f3;

    --ion-item-background: #1e1e1e;

    --ion-toolbar-background: #1f1f1f;

    --ion-tab-bar-background: #1f1f1f;

    --ion-card-background: #1e1e1e;
    /* My colors */
    --ion-color-expediente: #dae3f3;
  }
}
.center {
  text-align: center;
}
.wrapper {
  padding: 150px 20px 0 20px;
  overflow: auto;
}
/* .cal-modal{
  --height: 80%;
  --border-radius: 10px;
  padding: 25px;
} */
//MODALS
.add-note-modal,
.emend-message-modal {
  --height: 50%;
  --border-radius: 10px;
  padding: 25px;
  background: rgba(51, 51, 51, 0.3);
}
.add-note-modal-no-height {
  --border-radius: 10px;
  padding: 25px;
  background: rgba(51, 51, 51, 0.3);
}
.discart-expedient-modal {
  --height: 50%;
  --border-radius: 10px;
  padding: 25px;
  background: rgba(51, 51, 51, 0.3);
}
.modal,
.newchat,
.new-group,
.contacts,
.group-messages,
.custom-modal {
  padding-top: 65px;
  --border-radius: 25px 25px 0 0;
  --border-width: 0px;
}
.capitalizeText {
  text-transform: capitalize;
}
//POPOVER
.chat-popover .popover-content {
  width: 100% !important;
  left: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  top: unset !important;
}
.messages-options .popover-content {
  width: 100% !important;
  left: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  top: unset !important;
}
.events-options .popover-content {
  width: 100% !important;
  left: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  top: unset !important;
}
.exp-options .popover-content {
  width: 100% !important;
  left: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  top: unset !important;
}
/* .exp-options .popover-content{
  width: 100% !important;
  left: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  top: calc(100% - 260px) !important;
  max-height: 260px;
  min-height: 260px;
} */
.chat-options-popover .popover-content {
  width: 100% !important;
  left: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  top: unset !important;
}
.group-duration .popover-content {
  width: 100% !important;
  left: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  top: unset !important;
}

/* .event-actions-popover ion-list{
} */

.item-hover:hover {
  background-color: var(--box-hover-background-color);
}

.box-hover:hover {
  background-color: var(--box-hover-background-color) !important;
  border: var(--box-hover-background-border-color) !important;
}

.Rectangle {
  border-radius: 15px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
  border: solid 1px #e9e9e9;
  background-color: var(--white);
  margin: 0 auto;
  padding: 10px;
  margin-bottom: 10px;
  overflow: auto;
}
.content-pr-Oficial,
.content-PR-Oficial {
  width: 340px;
  border-radius: 5px;
  border-right: 5px solid #99e47b;
  overflow: auto;
}
.content-pr-Pessoal,
.content-PR-Pessoal {
  width: 340px;
  border-radius: 5px;
  border-right: 5px solid #958bfc;
  overflow: auto;
}
.content-mdgpr-Oficial,
.content-MDGPR-Oficial {
  width: 340px;
  border-radius: 5px;
  border-right: 5px solid #ffb703;
  overflow: auto;
}
.content-mdgpr-Pessoal,
.content-MDGPR-Pessoal {
  width: 340px;
  border-radius: 5px;
  border-right: 5px solid #f05d5e;
  overflow: auto;
}

.item-conten-agenda-Oficial-100000011 {
  border-radius: 5px;
  border-right: 5px solid #ffb703;
}

.item-conten-agenda-Pessoal-100000011 {
  border-radius: 5px;
  border-right: 5px solid #ff0303;
}

.item-conten-agenda-Oficial-100000014 {
  border-radius: 5px;
  border-right: 5px solid #03d838;
}

.item-conten-agenda-Pessoal-100000014 {
  border-radius: 5px;
  border-right: 5px solid #8b0ae0;
}

.approve-event-time {
  width: 33px;
  float: left;
}
.approve-event-time p {
  font-family: Roboto;
  font-size: 13px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: var(--Antartic-grey);
  margin: 0;
  padding: 0;
}
.approve-event-detail {
  float: left;
  margin-left: 10px;
}
.approve-event-detail p {
  width: 250px;
  font-family: Roboto;
  font-size: 13px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: var(--black);
  margin: 0;
  padding: 0;
}
.approve-event-detail h3 {
  width: 250px;
  font-family: Roboto;
  font-size: 15px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: var(--header-tab-text-white);
  margin: 0;
  padding: 0;
}
.nav-icon {
  font-size: 40px;
}
.btn-div {
  width: 390px;
  margin: 10px;
  overflow: auto;
}
.footer-toolbar {
  width: 400px;
  margin: 10px auto;
  overflow: auto;
  --background: #fff;
}

.btn-ok-no-width {
  height: 45px !important;
  margin: 0 auto;
  padding: 0 !important;
  border-radius: 22.5px;
  background-color: #42b9fe;
  color: #ffffff !important;
}
.btn-ok {
  width: 170px !important;
  height: 45px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: 22.5px;
  background-color: #42b9fe;
  color: #ffffff !important;
}
.btn-delete {
  display: block;
  width: 170px !important;
  height: 45px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: 22.5px;
  background-color: #ffe0e0;
  color: #d30a0a !important;
}
.btn-cancel {
  display: block;
  width: 170px !important;
  height: 45px !important;
  padding: 0 !important;
  border-radius: 22.5px;
  background-color: #e0e9ee;
  color: #061b52 !important;
  margin: 0 auto !important;
}

.btn-cancel:hover,
.btn-delete:hover {
  background-color: var(--button-hover);
  color: #ffffff !important;
}

.btn-ok-medium {
  width: 130px !important;
  height: 45px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: 22.5px;
  background-color: #42b9fe;
  color: #ffffff !important;
}
.btn-delete-medium {
  display: block;
  width: 130px !important;
  height: 45px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: 22.5px;
  background-color: #ffe0e0;
  color: #d30a0a !important;
}
.btn-cancel-medium {
  display: block;
  width: 130px !important;
  height: 45px !important;
  padding: 0 !important;
  border-radius: 22.5px;
  background-color: #e0e9ee;
  color: #061b52 !important;
  margin: 0 auto !important;
}
.btn-no-color {
  background-color: #fff;
}

.exp-workflow {
  float: left;
  margin-left: 15px;

  .label {
    border-radius: 20px;
    background: #ffb703;
    font-size: 12px;
    float: right;
    padding: 2.5px 13.5px 2.5px 13.5px;
    color: #fff;
  }
}

/* .main-content{
  width: 100%;
  height: 100% !important;
  overflow-y: auto;
} */

/* Importing Bootstrap SCSS file. */
@import "~bootstrap/scss/bootstrap";

html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

.ion-segment-button-no-border {
  --indicator-color: transparent !important;
  --indicator-color-checked: transparent !important;
}

.gov {
  --login-background: linear-gradient(180deg, #c63527 60%, #000 100%) !important;
  --button-hover: #ffb81c;
  --inicio-open-page-from-box: #c63527;

  --header-tab-top-border: #000;
  --header-tab-text-white: rgb(0, 0, 0);
  --header-container-background: #fff;
  --header-bottom-line-background: rgb(255, 0, 0);
  --header-bottom-line-background-image: linear-gradient(to right, #c63527, #ffb81c, #ffc72c);
  --font-awesome: #ffb81c;

  --color: #d9d9d9;
  --color2: #f0f0f0;
  --color3: #d9d9d9;
  --color4: #d9d9d9ee;
  --color5: #ececec;

  --title-text-color: rgb(0, 0, 0);
  --subtitle-text-color: #000;

  --gabinete-title-container: #fff;
  --gabinete-main-container: #fff;

  --gabinete-active-hove-background: #C63527 !important;
  --gabinete-active-hove-box-sizing: border-box;

  --box-hover-background-color: #e4e8eb75 !important;
  --box-hover-background-border-color: 1px solid #ff4040 !important;

  .bg-blue {
    --background: #ffffff;
    background: #ffffff;
    --background-color: #ffffff;
    background-color: #ffffff;
    color: #000000;
    --color: #000000;
  }
  
}

.default {
  --login-background: linear-gradient(180deg, #42b9fe 0%, #0782c9 100%) !important;
  --button-hover: #bfcbd1;
  --inicio-open-page-from-box: #42b9fe;

  --header-tab-top-border: white;
  --header-tab-text-white: white;
  --header-container-background: linear-gradient(
    270deg,
    var(--color2) 0%,
    var(--color3) 23.44%,
    var(--color4) 78.13%,
    var(--color5) 100%
  ) !important;
  --header-bottom-line-background: linear-gradient(
    270deg,
    var(--color2) 0%,
    var(--color3) 23.44%,
    var(--color4) 78.13%,
    var(--color5) 100%
  ) !important;
  --header-bottom-line-background-image: linear-gradient(
    270deg,
    var(--color2) 0%,
    var(--color3) 23.44%,
    var(--color4) 78.13%,
    var(--color5) 100%
  ) !important;

  --header-container-background: linear-gradient(
    270deg,
    var(--color2) 0%,
    var(--color3) 23.44%,
    var(--color4) 78.13%,
    var(--color5) 100%
  ) !important;
  --header-bottom-line-background: linear-gradient(
    270deg,
    var(--color2) 0%,
    var(--color3) 23.44%,
    var(--color4) 78.13%,
    var(--color5) 100%
  ) !important;
  --header-bottom-line-background-image: linear-gradient(
    270deg,
    var(--color2) 0%,
    var(--color3) 23.44%,
    var(--color4) 78.13%,
    var(--color5) 100%
  ) !important;
  --font-awesome: #42b9fe;
  --color: #0782c9;
  --color2: #45baff;
  --color3: #0782c9;
  --color4: #0782c9f0;
  --color5: #45baff;

  --title-text-color: #0d89d1;
  --subtitle-text-color: #000;

  --gabinete-title-container: #ecf8ff;
  --gabinete-main-container: #ecf8ff;

  --gabinete-active-hove-background: #42b9fe;
  --gabinete-active-hove-box-border: 1px solid #42b9fe;

  --box-hover-background-color: #e6f6ff75;
  --box-hover-background-border-color: 1px solid #42b9fe;


  .bg-blue {
    --background: #0782c9;
    background: #0782c9;
    --background-color: #0782c9;
    background-color: #0782c9;
    color: #ffffff;
    --color: #ffffff;
  }
}

.font-awesome {
  color: var(--font-awesome) !important;
}