diff --git a/src/app/services/background.service.ts b/src/app/services/background.service.ts index 8f8818147..c71b721d0 100644 --- a/src/app/services/background.service.ts +++ b/src/app/services/background.service.ts @@ -77,4 +77,12 @@ export class BackgroundService { document.body.style.setProperty(`--header-bottom-line-background-image`, "linear-gradient(270deg, var(--color2) 0%, var(--color3) 23.44%, var(--color4) 78.13%, var(--color5) 100%) !important"); } + + default() { + document.body.style.setProperty(`--color`, "#0782C9"); + document.body.style.setProperty(`--color2`, "#45BAFF"); + document.body.style.setProperty(`--color3`, "#0782C9"); + document.body.style.setProperty(`--color4`, "#0782c9f0"); + document.body.style.setProperty(`--color5`, "#45BAFF"); + } } diff --git a/src/index.html b/src/index.html index 5f652ec5f..de48f74c9 100644 --- a/src/index.html +++ b/src/index.html @@ -67,7 +67,7 @@ - + diff --git a/src/theme/variables.scss b/src/theme/variables.scss index 4b807a945..7a34a7cad 100644 --- a/src/theme/variables.scss +++ b/src/theme/variables.scss @@ -1,7 +1,6 @@ - // Custom Theming for Angular Material // For more information: https://material.angular.io/guide/theming -@import '~@angular/material/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 @@ -20,13 +19,15 @@ $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, +$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 @@ -79,7 +80,7 @@ $app-theme: mat-light-theme(( --ion-color-warning-tint: #ffca22; /** danger **/ - --ion-color-red:#d30a0a; + --ion-color-red: #d30a0a; --ion-color-danger: #eb445a; --ion-color-danger-rgb: 235, 68, 90; --ion-color-danger-contrast: #ffffff; @@ -122,65 +123,65 @@ $app-theme: mat-light-theme(( body { --ion-color-primary: #428cff; - --ion-color-primary-rgb: 66,140,255; + --ion-color-primary-rgb: 66, 140, 255; --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255,255,255; + --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-rgb: 80, 200, 255; --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255,255,255; + --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-rgb: 106, 100, 255; --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255,255,255; + --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-rgb: 47, 223, 117; --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0,0,0; + --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-rgb: 255, 213, 52; --ion-color-warning-contrast: #000000; - --ion-color-warning-contrast-rgb: 0,0,0; + --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-rgb: 255, 73, 97; --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255,255,255; + --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-rgb: 244, 245, 248; --ion-color-dark-contrast: #000000; - --ion-color-dark-contrast-rgb: 0,0,0; + --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-rgb: 152, 154, 162; --ion-color-medium-contrast: #000000; - --ion-color-medium-contrast-rgb: 0,0,0; + --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-rgb: 34, 36, 40; --ion-color-light-contrast: #ffffff; - --ion-color-light-contrast-rgb: 255,255,255; + --ion-color-light-contrast-rgb: 255, 255, 255; --ion-color-light-shade: #1e2023; --ion-color-light-tint: #383a3e; @@ -194,10 +195,10 @@ $app-theme: mat-light-theme(( .ios body { --ion-background-color: #000000; - --ion-background-color-rgb: 0,0,0; + --ion-background-color-rgb: 0, 0, 0; --ion-text-color: #ffffff; - --ion-text-color-rgb: 255,255,255; + --ion-text-color-rgb: 255, 255, 255; --ion-color-step-50: #0d0d0d; --ion-color-step-100: #1a1a1a; @@ -228,7 +229,6 @@ $app-theme: mat-light-theme(( --ion-color-expediente: #dae3f3; } - /* * Material Design Dark Theme * ------------------------------------------- @@ -236,10 +236,10 @@ $app-theme: mat-light-theme(( .md body { --ion-background-color: #121212; - --ion-background-color-rgb: 18,18,18; + --ion-background-color-rgb: 18, 18, 18; --ion-text-color: #ffffff; - --ion-text-color-rgb: 255,255,255; + --ion-text-color-rgb: 255, 255, 255; --ion-border-color: #222222; @@ -270,14 +270,14 @@ $app-theme: mat-light-theme(( --ion-tab-bar-background: #1f1f1f; --ion-card-background: #1e1e1e; -/* My colors */ + /* My colors */ --ion-color-expediente: #dae3f3; } } -.center{ +.center { text-align: center; } -.wrapper{ +.wrapper { padding: 150px 20px 0 20px; overflow: auto; } @@ -287,29 +287,35 @@ $app-theme: mat-light-theme(( padding: 25px; } */ //MODALS -.add-note-modal, .emend-message-modal{ +.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{ +.add-note-modal-no-height { --border-radius: 10px; padding: 25px; background: rgba(51, 51, 51, 0.3); } -.discart-expedient-modal{ +.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{ +.modal, +.newchat, +.new-group, +.contacts, +.group-messages, +.custom-modal { padding-top: 65px; --border-radius: 25px 25px 0 0; - --border-width:0px; + --border-width: 0px; } -.capitalizeText{ +.capitalizeText { text-transform: capitalize; } //POPOVER @@ -320,21 +326,21 @@ $app-theme: mat-light-theme(( right: 0 !important; top: unset !important; } -.messages-options .popover-content{ +.messages-options .popover-content { width: 100% !important; left: 0 !important; bottom: 0 !important; right: 0 !important; top: unset !important; } -.events-options .popover-content{ +.events-options .popover-content { width: 100% !important; left: 0 !important; bottom: 0 !important; right: 0 !important; top: unset !important; } -.exp-options .popover-content{ +.exp-options .popover-content { width: 100% !important; left: 0 !important; bottom: 0 !important; @@ -350,14 +356,14 @@ $app-theme: mat-light-theme(( max-height: 260px; min-height: 260px; } */ -.chat-options-popover .popover-content{ +.chat-options-popover .popover-content { width: 100% !important; left: 0 !important; bottom: 0 !important; right: 0 !important; top: unset !important; } -.group-duration .popover-content{ +.group-duration .popover-content { width: 100% !important; left: 0 !important; bottom: 0 !important; @@ -368,11 +374,11 @@ $app-theme: mat-light-theme(( /* .event-actions-popover ion-list{ } */ -.item-hover:hover{ +.item-hover:hover { background-color: #e6f6ff75 !important; } -.box-hover:hover{ +.box-hover:hover { background-color: #e6f6ff75 !important; border: 1px solid #42b9fe !important; } @@ -387,25 +393,29 @@ $app-theme: mat-light-theme(( margin-bottom: 10px; overflow: auto; } -.content-pr-Oficial, .content-PR-Oficial{ +.content-pr-Oficial, +.content-PR-Oficial { width: 340px; border-radius: 5px; border-right: 5px solid #99e47b; overflow: auto; } -.content-pr-Pessoal, .content-PR-Pessoal{ +.content-pr-Pessoal, +.content-PR-Pessoal { width: 340px; border-radius: 5px; border-right: 5px solid #958bfc; overflow: auto; } -.content-mdgpr-Oficial, .content-MDGPR-Oficial{ +.content-mdgpr-Oficial, +.content-MDGPR-Oficial { width: 340px; border-radius: 5px; border-right: 5px solid #ffb703; overflow: auto; } -.content-mdgpr-Pessoal, .content-MDGPR-Pessoal{ +.content-mdgpr-Pessoal, +.content-MDGPR-Pessoal { width: 340px; border-radius: 5px; border-right: 5px solid #f05d5e; @@ -432,11 +442,11 @@ $app-theme: mat-light-theme(( border-right: 5px solid #8b0ae0; } -.approve-event-time{ +.approve-event-time { width: 33px; float: left; } -.approve-event-time p{ +.approve-event-time p { font-family: Roboto; font-size: 13px; font-weight: normal; @@ -448,11 +458,11 @@ $app-theme: mat-light-theme(( margin: 0; padding: 0; } -.approve-event-detail{ +.approve-event-detail { float: left; margin-left: 10px; } -.approve-event-detail p{ +.approve-event-detail p { width: 250px; font-family: Roboto; font-size: 13px; @@ -465,7 +475,7 @@ $app-theme: mat-light-theme(( margin: 0; padding: 0; } -.approve-event-detail h3{ +.approve-event-detail h3 { width: 250px; font-family: Roboto; font-size: 15px; @@ -478,119 +488,118 @@ $app-theme: mat-light-theme(( margin: 0; padding: 0; } -.nav-icon{ +.nav-icon { font-size: 40px; } -.btn-div{ +.btn-div { width: 390px; margin: 10px; overflow: auto; } -.footer-toolbar{ +.footer-toolbar { width: 400px; margin: 10px auto; overflow: auto; --background: #fff; } -.btn-ok-no-width{ +.btn-ok-no-width { height: 45px !important; margin: 0 auto; - padding:0 !important; + padding: 0 !important; border-radius: 22.5px; background-color: #42b9fe; color: #ffffff !important; } -.btn-ok{ +.btn-ok { width: 170px !important; height: 45px !important; margin: 0 auto !important; - padding:0 !important; + padding: 0 !important; border-radius: 22.5px; background-color: #42b9fe; color: #ffffff !important; } -.btn-delete{ +.btn-delete { display: block; width: 170px !important; height: 45px !important; margin: 0 auto !important; - padding:0 !important; + padding: 0 !important; border-radius: 22.5px; background-color: #ffe0e0; color: #d30a0a !important; } -.btn-cancel{ +.btn-cancel { display: block; width: 170px !important; height: 45px !important; - padding:0 !important; + padding: 0 !important; border-radius: 22.5px; - background-color: #e0e9ee; + background-color: #e0e9ee; color: #061b52 !important; margin: 0 auto !important; } -.btn-cancel:hover, .btn-delete:hover{ +.btn-cancel:hover, +.btn-delete:hover { background-color: #42b9fe; color: #ffffff !important; } -.btn-ok-medium{ +.btn-ok-medium { width: 130px !important; height: 45px !important; margin: 0 auto !important; - padding:0 !important; + padding: 0 !important; border-radius: 22.5px; background-color: #42b9fe; color: #ffffff !important; } -.btn-delete-medium{ +.btn-delete-medium { display: block; width: 130px !important; height: 45px !important; margin: 0 auto !important; - padding:0 !important; + padding: 0 !important; border-radius: 22.5px; background-color: #ffe0e0; color: #d30a0a !important; } -.btn-cancel-medium{ +.btn-cancel-medium { display: block; width: 130px !important; height: 45px !important; - padding:0 !important; + padding: 0 !important; border-radius: 22.5px; - background-color: #e0e9ee; + background-color: #e0e9ee; color: #061b52 !important; margin: 0 auto !important; } -.btn-no-color{ +.btn-no-color { background-color: #fff; } -.bg-blue{ - --background:#0782c9; - background:#0782c9; - --background-color:#0782c9; - background-color:#0782c9; +.bg-blue { + --background: #0782c9; + background: #0782c9; + --background-color: #0782c9; + background-color: #0782c9; color: #ffffff; --color: #ffffff; } -.exp-workflow{ +.exp-workflow { float: left; margin-left: 15px; - .label{ + .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%; @@ -598,35 +607,49 @@ $app-theme: mat-light-theme(( overflow-y: auto; } */ - - /* Importing Bootstrap SCSS file. */ -@import '~bootstrap/scss/bootstrap'; +@import "~bootstrap/scss/bootstrap"; -html, body { height: 100%; } -body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } +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; +.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); + + --color: #D9D9D9; + --color2: #f0f0f0; + --color3: #D9D9D9; + --color4: #d9d9d9ee; + --color5: #ececec; } .default { - --login-background: linear-gradient(180deg, #42B9FE 0%, #0782C9 100%) !important; - --button-hover: #42B9FE; - --inicio-open-page-from-box: #42B9FE; + --login-background: linear-gradient(180deg, #42b9fe 0%, #0782c9 100%) !important; + --button-hover: #42b9fe; + --inicio-open-page-from-box: #42b9fe; --header-tab-top-border: white; --header-tab-text-white: white; + + --color: #0782c9; + --color2: #45baff; + --color3: #0782c9; + --color4: #0782c9f0; + --color5: #45baff; }