// 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) !important; } .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: var(--button-color); color: #ffffff !important; } .btn-ok { width: 170px !important; height: 45px !important; margin: 0 auto !important; padding: 0 !important; border-radius: 22.5px; background-color: var(--button-color); color: var(--button-text-color); } .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: var(--button-color); 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 { --ion-color-primary: #000; --ion-color-secondary: #e4e8eb75; --login-background: linear-gradient(180deg, #c63527 60%, #000 100%) !important; --button-hover: #c63527; --button-color: #ffb81c; --button-text-color: #000; --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; --font-awesome-1: #c63527; --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; --profile-text-color: #000000; .bg-blue { --background: #ffffff; background: #ffffff; --background-color: #ffffff; background-color: #ffffff; color: #000000; --color: #000000; } .bg-1{ background: #ffc72c38; .bg-2{ background: #FFB81C; .bg-3{ background: #FFC72C; .bg-4{ background: rgba(255, 255, 255, 0.918); } } } } } .default { --ion-color-primary: #3880ff; --ion-color-secondary: #e4e8eb75; --login-background: linear-gradient(180deg, #42b9fe 0%, #0782c9 100%) !important; --button-hover: #42b9fe; --inicio-open-page-from-box: #42b9fe; --button-color: #e0e9ee; --button-text-color: #white; --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; --font-awesome-1: #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; --profile-text-color: #ffffff; .bg-blue { --background: #0782c9; background: #0782c9; --background-color: #0782c9; background-color: #0782c9; color: #ffffff; --color: #ffffff; } .bg-1{ background: #4cb9f825; .bg-2{ background: #61bdf2b4; .bg-3{ background: #96d3f8be; .bg-4{ background: rgba(255, 255, 255, 0.918); } } } } } .font-awesome { color: var(--font-awesome) !important; } .font-awesome-1 { color: var(--font-awesome-1) !important; }