replace primary color 2, primary color 3 with link + draft color. Fix respective colors in views, remove unused styles

This commit is contained in:
mchouliara 2024-09-26 17:30:09 +03:00
parent 9653a0cb04
commit da597131db
48 changed files with 276 additions and 309 deletions

View File

@ -84,8 +84,8 @@ export class TenantHandlingService extends BaseService {
if (cssColors) {
if (cssColors.primaryColor) document.documentElement.style.setProperty(`--primary-color`, cssColors.primaryColor);
if (cssColors.primaryColor2) document.documentElement.style.setProperty(`--primary-color-2`, cssColors.primaryColor2);
if (cssColors.primaryColor3) document.documentElement.style.setProperty(`--primary-color-3`, cssColors.primaryColor3);
if (cssColors.primaryColor2) document.documentElement.style.setProperty(`--link-color`, cssColors.primaryColor2);
if (cssColors.primaryColor3) document.documentElement.style.setProperty(`--draft-color`, cssColors.primaryColor3);
if (cssColors.secondaryColor) document.documentElement.style.setProperty(`--secondary-color`, cssColors.secondaryColor);
if (localStorage.getItem('primaryText')) document.documentElement.style.setProperty(`--primary-text`, localStorage.getItem('primaryText'));
if (localStorage.getItem('secondaryText')) document.documentElement.style.setProperty(`--secondary-text`, localStorage.getItem('secondaryText'));

View File

@ -12,7 +12,7 @@
}
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background-color: var(--primary-color-3);
background-color: var(--primary-color);
}
::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {

View File

@ -26,7 +26,7 @@
}
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background-color: var(--primary-color-3);
background-color: var(--primary-color);
}
::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {

View File

@ -11,14 +11,6 @@
}
}
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background-color: var(--primary-color-3);
}
::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
background-color: #b0b0b0;
}
::ng-deep .mdc-form-field {
label {
margin: 0;

View File

@ -7,18 +7,10 @@
.add {
background-color: white;
color: #009700;
color: #009700; //todo mchouliara
}
}
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background-color: var(--primary-color-3);
}
::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
background-color: #b0b0b0;
}
.dlt-section-btn {
margin: 0;

View File

@ -10,11 +10,3 @@
color: #009700;
}
}
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background-color: var(--primary-color-3);
}
::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
background-color: #b0b0b0;
}

View File

@ -17,33 +17,7 @@
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor')?.hasError('invalidColor')">{{'GENERAL.VALIDATION.INVALID-COLOR' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-12 col-md-6">
<mat-label>{{'TENANT-CONFIGURATION-EDITOR.FIELDS.PRIMARY-COLOR-2' | translate}}</mat-label>
<input matInput [formControl]="formGroup.get('cssColors')?.get('primaryColor2Input')" required />
<ngx-colors
class="suffix"
matSuffix
ngx-colors-trigger
[formControl]="formGroup.get('cssColors')?.get('primaryColor2')"
></ngx-colors>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor2')?.hasError('backendError')">{{formGroup.get('cssColors')?.get('primaryColor2')?.getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor2')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor2')?.hasError('invalidColor')">{{'GENERAL.VALIDATION.INVALID-COLOR' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-12 col-md-6">
<mat-label>{{'TENANT-CONFIGURATION-EDITOR.FIELDS.PRIMARY-COLOR-3' | translate}}</mat-label>
<input matInput [formControl]="formGroup.get('cssColors')?.get('primaryColor3Input')" required />
<ngx-colors
class="suffix"
matSuffix
ngx-colors-trigger
[formControl]="formGroup.get('cssColors')?.get('primaryColor3')"
></ngx-colors>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor3')?.hasError('backendError')">{{formGroup.get('cssColors')?.get('primaryColor3')?.getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor3')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor3')?.hasError('invalidColor')">{{'GENERAL.VALIDATION.INVALID-COLOR' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-12 col-md-6">
<mat-form-field class="col-12 col-md-6">
<mat-label>{{'TENANT-CONFIGURATION-EDITOR.FIELDS.SECONDARY-COLOR' | translate}}</mat-label>
<input matInput [formControl]="formGroup.get('cssColors')?.get('secondaryColorInput')" required />
<ngx-colors
@ -82,8 +56,50 @@
<mat-error *ngIf="formGroup.get('cssColors')?.get('secondaryText')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('secondaryText')?.hasError('invalidColor')">{{'GENERAL.VALIDATION.INVALID-COLOR' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-12 col-md-6">
<mat-label>
<mat-icon aria-hidden [matTooltip]="'TENANT-CONFIGURATION-EDITOR.FIELDS.LINK-COLOR-HINT' | translate">
info
</mat-icon>
{{'TENANT-CONFIGURATION-EDITOR.FIELDS.LINK-COLOR' | translate}}
</mat-label>
<input matInput [formControl]="formGroup.get('cssColors')?.get('primaryColor2Input')" required />
<ngx-colors
class="suffix"
matSuffix
ngx-colors-trigger
[formControl]="formGroup.get('cssColors')?.get('primaryColor2')"
></ngx-colors>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor2')?.hasError('backendError')">{{formGroup.get('cssColors')?.get('primaryColor2')?.getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor2')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor2')?.hasError('invalidColor')">{{'GENERAL.VALIDATION.INVALID-COLOR' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-12 col-md-6">
<mat-label>
<mat-icon aria-hidden [matTooltip]="'TENANT-CONFIGURATION-EDITOR.FIELDS.DRAFT-STATUS-COLOR-HINT' | translate">
info
</mat-icon>
{{'TENANT-CONFIGURATION-EDITOR.FIELDS.DRAFT-STATUS-COLOR' | translate}}
</mat-label>
<input matInput [formControl]="formGroup.get('cssColors')?.get('primaryColor3Input')" required />
<ngx-colors
class="suffix"
matSuffix
ngx-colors-trigger
[formControl]="formGroup.get('cssColors')?.get('primaryColor3')"
></ngx-colors>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor3')?.hasError('backendError')">{{formGroup.get('cssColors')?.get('primaryColor3')?.getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor3')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor3')?.hasError('invalidColor')">{{'GENERAL.VALIDATION.INVALID-COLOR' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-12 col-md-6">
<mat-label [matTooltip]="'TENANT-CONFIGURATION-EDITOR.FIELDS.INVERTED-BUTTON-HINT' | translate">{{'TENANT-CONFIGURATION-EDITOR.FIELDS.INVERTED-BUTTON-COLOR' | translate}}</mat-label>
<mat-label >
<mat-icon aria-hidden [matTooltip]="'TENANT-CONFIGURATION-EDITOR.FIELDS.INVERTED-BUTTON-HINT' | translate">
info
</mat-icon>
{{'TENANT-CONFIGURATION-EDITOR.FIELDS.INVERTED-BUTTON-COLOR' | translate}}
</mat-label>
<input matInput [formControl]="formGroup.get('cssColors')?.get('invertedBtnColorInput')" required />
<ngx-colors
class="suffix"

View File

@ -10,11 +10,3 @@
color: #009700;
}
}
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background-color: var(--primary-color-3);
}
::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
background-color: #b0b0b0;
}

View File

@ -7,14 +7,6 @@
.add {
background-color: white;
color: #009700;
color: #009700; //todo mchouliara
}
}
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background-color: var(--primary-color-3);
}
::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
background-color: #b0b0b0;
}

View File

@ -60,7 +60,7 @@ $mat-card-header-size: 40px !default;
}
.warn {
color: #f16868;
color: var(--warning-color);
}
.comments-count {

View File

@ -89,9 +89,9 @@
font-weight: 300;
font-size: 1rem;
letter-spacing: 0px;
color: var(--primary-color-2);
color: var(--link-color);
&:hover {
color: var(--secondary-color)
color: var(--primary-color)
}
opacity: 1;
}
@ -213,7 +213,7 @@ input[type="text"] {
}
.draft {
color: #f16868;
color: var(--draft-color);
}
.stats {

View File

@ -79,7 +79,7 @@ input[type="text"] {
}
.draft {
color: #f16868;
color: var(--draft-color);
}
.pointer {

View File

@ -50,7 +50,7 @@
}
.input-btn :hover {
color: var(--primary-color-3) !important;
color: var(--primary-color) !important;
}
.plan-link {

View File

@ -79,7 +79,7 @@
}
.more-icon :hover {
color: var(--primary-color-3);
color: var(--primary-color);
}
.new-description {

View File

@ -96,7 +96,7 @@
.filter-btn button {
color: white;
background-color: var(--primary-color-2);
background-color: var(--primary-color);
width: 37px;
height: 45px;
}
@ -105,8 +105,11 @@
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.02rem;
color: #2d72d6;
color: var(--link-color);
cursor: pointer;
&:hover{
color: var(--primary-color);
}
}
.search-form {
@ -128,7 +131,7 @@
}
.pointer:hover {
color: var(--primary-color-3);
color: var(--primary-color);
}
::ng-deep .search-form .mat-form-field-wrapper {

View File

@ -27,7 +27,7 @@
.filters-title {
width: 93px;
color: var(--primary-color-2);
color: var(--primary-color);
background-color: white;
padding: 0px 20px;
margin-top: -10px;

View File

@ -3,24 +3,6 @@
color: var(--gray);
}
.container-header {
display: flex;
align-items: baseline;
margin-top: 0px;
text-transform: uppercase;
}
.container-header p {
letter-spacing: 5px;
color: var(--gray);
padding-top: 10px;
margin-bottom: 0px;
}
.container-header :hover {
color: var(--primary-color-3);
}
h4 {
display: inline;
padding-left: 1em;
@ -36,37 +18,16 @@ h4 > span {
line-height: 2em;
}
.about-item {
display: flex;
flex-wrap: wrap;
}
.links :hover {
color: var(--primary-color-3);
color: var(--primary-color);
}
.about-item .length {
color: var(--primary-color-3);
}
.about-item .title {
margin: 2px 10px;
}
.about-item p {
margin-left: auto;
margin-bottom: 0px;
padding-top: 7px;
color: var(--gray);
}
p {
color: #333333;
}
.storage :hover {
color: var(--primary-color-3);
}
.draft-bookmark {
color: #e7e6e6;
@ -160,7 +121,7 @@ input[type="text"] {
font-size: 1rem;
padding-top: 0.75rem;
padding-bottom: 0.55rem;
color: #f16868;
color: var(--draft-color);
}
.icon-align {
@ -222,7 +183,7 @@ input[type="text"] {
.draft {
color: #f16868;
color: var(--draft-color);
}
.pointer {

View File

@ -183,7 +183,6 @@
.plan-btn-label {
margin-right: 1em;
color: var(--primary-text);
opacity: 0.8;
text-align: left;
min-width: 0;
text-wrap: nowrap;

View File

@ -7,7 +7,7 @@
</div>
<div class="col-auto p-0" [ngClass]="{'mb-1': item.title == HOME_SYMBOL}">
<a *ngIf="(!item?.skipNavigation && !isLast) else skipNavigation" [routerLink]="computePath(index)" [attr.aria-label]="item.title !== HOME_SYMBOL ? item.title : ('ALT-TEXT.GO-TO-MAIN' | translate)" class=" text-black" disabled>
<a *ngIf="(!item?.skipNavigation && !isLast) else skipNavigation" [routerLink]="computePath(index)" [attr.aria-label]="item.title !== HOME_SYMBOL ? item.title : ('ALT-TEXT.GO-TO-MAIN' | translate)" class=" color-unset" disabled>
<ng-container *ngIf="item.title !== HOME_SYMBOL else homeIcon">
<span class="breadcrumb-item p-2">
{{ item.title | translate:item.translateParams }}

View File

@ -4,7 +4,7 @@
}
.text-black{
color: #000;
color: #000000;
}
.mat-icon{

View File

@ -45,6 +45,8 @@ $mat-card-header-size: 40px !default;
top: 0;
left: 0;
right: 0;
padding: 0.625rem 0;
}
.logo {
@ -72,7 +74,7 @@ $mat-card-header-size: 40px !default;
.faq-title:hover,
.lang:hover {
color: var(--primary-color-2) !important;
color: var(--primary-color) !important;
}
.lang {

View File

@ -39,12 +39,11 @@
font-weight: 400;
}
.filters {
}
.filters-title {
width: 93px;
color: var(--primary-color-2);
color: var(--primary-color);
background-color: white;
padding: 0px 20px;
margin-top: -10px;
@ -60,14 +59,6 @@
border: 1px solid var(--light-gray);
}
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
.mat-accent .mat-pseudo-checkbox-checked,
.mat-accent .mat-pseudo-checkbox-indeterminate,
.mat-pseudo-checkbox-checked,
.mat-pseudo-checkbox-indeterminate {
background-color: var(--primary-color-3);
}
::ng-deep .mat-ripple-element {
background-color: #2e74b649 !important;

View File

@ -3,23 +3,6 @@
color: var(--gray);
}
.container-header {
display: flex;
align-items: baseline;
margin-top: 0px;
text-transform: uppercase;
}
.container-header p {
letter-spacing: 5px;
color: var(--gray);
margin-bottom: 0px;
}
.container-header :hover {
color: var(--primary-color-3);
}
h4 {
display: inline;
padding-left: 1em;
@ -36,14 +19,6 @@ h4 > span {
flex-wrap: wrap;
}
.descriptions-counter {
display: flex;
}
.descriptions-counter :hover {
color: var(--primary-color-3) !important;
}
.about-item .title {
margin: 2px 10px;
text-transform: uppercase;
@ -180,7 +155,7 @@ input[type="text"] {
font-size: 1rem;
padding-top: 0.75rem;
padding-bottom: 0.55rem;
color: #f16868;
color: var(--draft-color);
}
.icon-align {
@ -242,7 +217,7 @@ input[type="text"] {
.draft {
color: #f16868;
color: var(--draft-color);
}
.pointer {

View File

@ -57,7 +57,7 @@
}
.more-icon :hover {
color: var(--primary-color-3);
color: var(--primary-color);
}
.header-title {
@ -160,7 +160,7 @@
.filter-btn button {
color: white;
background-color: var(--primary-color-2);
background-color: var(--primary-color);
width: 37px;
height: 45px;
}
@ -190,7 +190,7 @@
.pointer:hover,
.zenodo-link:hover {
color: var(--primary-color-3);
color: var(--primary-color);
}
::ng-deep .search-form .mat-form-field-wrapper {
@ -211,7 +211,10 @@
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.02rem;
color: #2d72d6;
color: var(--link-color);
&:hover {
color: var(--primary-color)
}
cursor: pointer;
}
@ -224,6 +227,9 @@
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.02rem;
color: #2d72d6;
color: var(--link-color);
&:hover {
color: var(--primary-color)
}
cursor: pointer;
}

View File

@ -58,5 +58,5 @@
}
.warn {
color: #f16868;
color: var(--warning-color);
}

View File

@ -139,11 +139,11 @@ mat-icon.size-16 {
}
.remove-description {
color: #f16868;
color: var(--draft-color);
}
.remove-description:hover {
color: #f16868;
color: var(--draft-color);
}
.stepper-actions {
@ -238,7 +238,7 @@ a {
}
a:hover {
color: var(--primary-color-3);
color: var(--primary-color);
}
.main-content {
@ -331,7 +331,7 @@ a:hover {
}
.input-btn :hover {
color: var(--primary-color-3) !important;
color: var(--primary-color) !important;
}
}

View File

@ -64,7 +64,7 @@
}
.descriptions span {
color: var(--primary-color-3);
color: var(--primary-color);
}
.emptyList {

View File

@ -1,6 +1,6 @@
.insert-manually {
text-decoration: underline;
color: var(--primary-color-3);
color: var(--primary-color);
cursor: pointer;
font-weight: 400;
}

View File

@ -16,11 +16,13 @@
}
.sidebar-footer .option:hover {
color: var(--primary-color-3);
background-color: #ececec;
border-radius: 6px;
}
.sidebar-footer .option:focus {
color: var(--primary-color-3);
background-color: #ececec;
border-radius: 6px;
}
.sidebar-footer .vl {
@ -29,5 +31,5 @@
}
.option-active {
color: var(--primary-color-3) !important;
color: var(--primary-color);
}

View File

@ -2,8 +2,10 @@
@for(footerItems of nestedFooterItems; track footerItems){
<ul class="row horizontal-list">
@for(item of footerItems; track item; let index=$index){
<li class="col-auto option" [routerLink]="routerUtils.generateUrl(item.routerPath)" [ngClass]="{'option-active': this.router.url === item.routerPath}" tabindex="0">
{{ item.title | translate}}
<li>
<a class="col-auto option" [routerLink]="routerUtils.generateUrl(item.routerPath)" [ngClass]="{'option-active': this.router.url === item.routerPath}" tabindex="0">
{{ item.title | translate}}
</a>
</li>
}
</ul>

View File

@ -117,7 +117,7 @@ $mat-card-header-size: 30px !default;
}
.active a i {
color: var(--primary-color-2);
color: var(--primary-color);
}
.inner-line {

View File

@ -4,12 +4,6 @@
background-color: #ffffff;
}
.clickable {
cursor: pointer;
}
.clickable:hover {
color: var(--primary-color-3) !important;
}
.user-profile {
.profile-card-center-row {
justify-content: center;

View File

@ -470,6 +470,10 @@
"PRIMARY-COLOR": "Primary Color",
"PRIMARY-COLOR-2": "Primary Color 2",
"PRIMARY-COLOR-3": "Primary Color 3",
"DRAFT-STATUS-COLOR": "Draft Status Color",
"DRAFT-STATUS-COLOR-HINT": "Font color for plans and descriptions that are in drafted status",
"LINK-COLOR": "Link Color",
"LINK-COLOR-HINT": "Font color for the links in the application",
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"SECONDARY-COLOR-TEXT": "Secondary Color Text",

View File

@ -473,6 +473,10 @@
"PRIMARY-COLOR": "Primary Color",
"PRIMARY-COLOR-2": "Primary Color 2",
"PRIMARY-COLOR-3": "Primary Color 3",
"DRAFT-STATUS-COLOR": "Draft Status Color",
"DRAFT-STATUS-COLOR-HINT": "Font color for plans and descriptions that are in drafted status",
"LINK-COLOR": "Link Color",
"LINK-COLOR-HINT": "Font color for the links in the application",
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"SECONDARY-COLOR-TEXT": "Secondary Color Text",

View File

@ -479,6 +479,10 @@
"PRIMARY-COLOR": "Primary Color",
"PRIMARY-COLOR-2": "Primary Color 2",
"PRIMARY-COLOR-3": "Primary Color 3",
"DRAFT-STATUS-COLOR": "Draft Status Color",
"DRAFT-STATUS-COLOR-HINT": "Font color for plans and descriptions that are in drafted status",
"LINK-COLOR": "Link Color",
"LINK-COLOR-HINT": "Font color for the links in the application",
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"SECONDARY-COLOR-TEXT": "Secondary Color Text",

View File

@ -473,6 +473,10 @@
"PRIMARY-COLOR": "Primary Color",
"PRIMARY-COLOR-2": "Primary Color 2",
"PRIMARY-COLOR-3": "Primary Color 3",
"DRAFT-STATUS-COLOR": "Draft Status Color",
"DRAFT-STATUS-COLOR-HINT": "Font color for plans and descriptions that are in drafted status",
"LINK-COLOR": "Link Color",
"LINK-COLOR-HINT": "Font color for the links in the application",
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"SECONDARY-COLOR-TEXT": "Secondary Color Text",

View File

@ -473,6 +473,10 @@
"PRIMARY-COLOR": "Primary Color",
"PRIMARY-COLOR-2": "Primary Color 2",
"PRIMARY-COLOR-3": "Primary Color 3",
"DRAFT-STATUS-COLOR": "Draft Status Color",
"DRAFT-STATUS-COLOR-HINT": "Font color for plans and descriptions that are in drafted status",
"LINK-COLOR": "Link Color",
"LINK-COLOR-HINT": "Font color for the links in the application",
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"SECONDARY-COLOR-TEXT": "Secondary Color Text",

View File

@ -473,6 +473,10 @@
"PRIMARY-COLOR": "Primary Color",
"PRIMARY-COLOR-2": "Primary Color 2",
"PRIMARY-COLOR-3": "Primary Color 3",
"DRAFT-STATUS-COLOR": "Draft Status Color",
"DRAFT-STATUS-COLOR-HINT": "Font color for plans and descriptions that are in drafted status",
"LINK-COLOR": "Link Color",
"LINK-COLOR-HINT": "Font color for the links in the application",
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"INVERTED-BUTTON-COLOR": "Inverted Button Color",

View File

@ -473,6 +473,10 @@
"PRIMARY-COLOR": "Primary Color",
"PRIMARY-COLOR-2": "Primary Color 2",
"PRIMARY-COLOR-3": "Primary Color 3",
"DRAFT-STATUS-COLOR": "Draft Status Color",
"DRAFT-STATUS-COLOR-HINT": "Font color for plans and descriptions that are in drafted status",
"LINK-COLOR": "Link Color",
"LINK-COLOR-HINT": "Font color for the links in the application",
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"SECONDARY-COLOR-TEXT": "Secondary Color Text",

View File

@ -472,6 +472,10 @@
"PRIMARY-COLOR": "Primary Color",
"PRIMARY-COLOR-2": "Primary Color 2",
"PRIMARY-COLOR-3": "Primary Color 3",
"DRAFT-STATUS-COLOR": "Draft Status Color",
"DRAFT-STATUS-COLOR-HINT": "Font color for plans and descriptions that are in drafted status",
"LINK-COLOR": "Link Color",
"LINK-COLOR-HINT": "Font color for the links in the application",
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"SECONDARY-COLOR-TEXT": "Secondary Color Text",

View File

@ -473,6 +473,10 @@
"PRIMARY-COLOR": "Primary Color",
"PRIMARY-COLOR-2": "Primary Color 2",
"PRIMARY-COLOR-3": "Primary Color 3",
"DRAFT-STATUS-COLOR": "Draft Status Color",
"DRAFT-STATUS-COLOR-HINT": "Font color for plans and descriptions that are in drafted status",
"LINK-COLOR": "Link Color",
"LINK-COLOR-HINT": "Font color for the links in the application",
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"SECONDARY-COLOR-TEXT": "Secondary Color Text",

View File

@ -473,6 +473,10 @@
"PRIMARY-COLOR": "Primary Color",
"PRIMARY-COLOR-2": "Primary Color 2",
"PRIMARY-COLOR-3": "Primary Color 3",
"DRAFT-STATUS-COLOR": "Draft Status Color",
"DRAFT-STATUS-COLOR-HINT": "Font color for plans and descriptions that are in drafted status",
"LINK-COLOR": "Link Color",
"LINK-COLOR-HINT": "Font color for the links in the application",
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"SECONDARY-COLOR-TEXT": "Secondary Color Text",

View File

@ -473,6 +473,10 @@
"PRIMARY-COLOR": "Primary Color",
"PRIMARY-COLOR-2": "Primary Color 2",
"PRIMARY-COLOR-3": "Primary Color 3",
"DRAFT-STATUS-COLOR": "Draft Status Color",
"DRAFT-STATUS-COLOR-HINT": "Font color for plans and descriptions that are in drafted status",
"LINK-COLOR": "Link Color",
"LINK-COLOR-HINT": "Font color for the links in the application",
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"SECONDARY-COLOR-TEXT": "Secondary Color Text",

View File

@ -22,12 +22,12 @@ legend {
}
a{
color: $link-color;
&:hover,
&:focus{
color: darken($link-color, 5%);
text-decoration: none;
}
// color: $link-color;
// &:hover,
// &:focus{
// color: darken($link-color, 5%);
// text-decoration: none;
// }
&.text-info{
&:hover, &:focus{

View File

@ -1,4 +1,4 @@
@import "variables/colors";
@import "variables/colors"; //mchouliara todo check if we can remove
@import "variables/shadow";
@import "variables/bootstrap-material-design-base";

View File

@ -36,7 +36,7 @@
font-weight: 500;
font-size: 1.25rem;
letter-spacing: 0px;
color: #f16868;
color: var(--warning-color);
opacity: 1;
}

View File

@ -7,15 +7,8 @@
.add {
background-color: white;
color: #009700;
color: #009700; //todo mchouliara
}
}
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background-color: var(--primary-color-3);
}
::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
background-color: #b0b0b0;
}

View File

@ -1,17 +1,38 @@
@use '@angular/material'as mat;
// @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
// @import "src/assets/scss/material-dashboard.scss";
//Material-Bootstrap configuration
@import "assets/scss/bootstrap-material";
@import "/node_modules/bootstrap/scss/bootstrap";
// @import "@covalent/core/theming/all-theme";
// @import "@angular/material/theming"; // @import '../node_modules/@angular/material/theming';
@import '../node_modules/@swimlane/ngx-datatable/index.css';
@import '../node_modules/@swimlane/ngx-datatable/themes/material.scss';
@import '../node_modules/@swimlane/ngx-datatable/assets/icons.css';
// Guided Tour style
@import '../node_modules/ngx-guided-tour/scss/guided-tour-base-theme.scss';
// Be sure that you only ever include this mixin once!
@include mat.core();
:root {
--primary-color: #18488F;
--primary-color-2: #1E59B1;
--primary-color-3: #246AD3;
--link-color: #1E59B1;
--draft-color: #f16868;
--secondary-color: #36900B;
--warning-color: #f44336;
--primary-text: #ffffff;
--secondary-text: #000000;
--inverted-btn-color: #ffffff;
--warning-color: #f44336;
--gray: #707070; //previously #848484
--light-gray: #aaaaaa;
--dark-gray: #212121;
@ -78,9 +99,9 @@ $mat-typography: mat.m2-define-typography-config($font-family: 'Roboto, sans-ser
// $input: mat.m2-define-typography-level($font-size: inherit, $line-height: 1.125, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
);
$mat-accessibility-typography: mat.m2-define-typography-config($font-family: 'Roboto, sans-serif;',
$subtitle-1: mat.m2-define-typography-level($font-size: 22px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
$subtitle-2: mat.m2-define-typography-level($font-size: 22px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
$body-1: mat.m2-define-typography-level($font-size: 18px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
$body-2: mat.m2-define-typography-level($font-size: 18px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
$button: mat.m2-define-typography-level($font-size: 16px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
@ -133,18 +154,16 @@ $mat-accessibility-theme: mat.m2-define-light-theme((color: (primary: $mat-theme
}
// @import "@covalent/core/theming/all-theme";
// @import "@angular/material/theming"; // @import '../node_modules/@angular/material/theming';
@import '../node_modules/@swimlane/ngx-datatable/index.css';
@import '../node_modules/@swimlane/ngx-datatable/themes/material.scss';
@import '../node_modules/@swimlane/ngx-datatable/assets/icons.css';
//Material-Bootstrap configuration
@import "assets/scss/bootstrap-material";
// Guided Tour style
@import '../node_modules/ngx-guided-tour/scss/guided-tour-base-theme.scss';
a {
color: var(--link-color);
&:hover {
color: var(--primary-color);
text-decoration: unset;
}
&.color-unset {
color: #000000;
}
}
.required-text {
font-size: 13px;
@ -183,7 +202,7 @@ $mat-accessibility-theme: mat.m2-define-light-theme((color: (primary: $mat-theme
}
.cc-btn {
background-color: var(--primary-color-3) !important;
background-color: var(--primary-color) !important;
}
.snackbar-warning {
@ -201,93 +220,93 @@ $mat-accessibility-theme: mat.m2-define-light-theme((color: (primary: $mat-theme
color: #111010;
}
.listing-item {
margin-top: 0.5em;
padding: 0.5em;
cursor: pointer;
border: 3px solid #f2f2f2;
// .listing-item {
// margin-top: 0.5em;
// padding: 0.5em;
// cursor: pointer;
// border: 3px solid #f2f2f2;
.title {
color: black;
}
// .title {
// color: black;
// }
.grant-title {
color: rgb(93, 125, 173);
}
// .grant-title {
// color: rgb(93, 125, 173);
// }
.gray-icon {
color: rgb(191, 191, 191);
}
// .gray-icon {
// color: rgb(191, 191, 191);
// }
.chip {
padding: 0.1em 1em;
border-radius: 10em;
background-color: #0d7489;
color: #fff;
text-transform: uppercase;
font-weight: 500;
max-width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
// .chip {
// padding: 0.1em 1em;
// border-radius: 10em;
// background-color: #0d7489;
// color: #fff;
// text-transform: uppercase;
// font-weight: 500;
// max-width: 160px;
// white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis;
// }
.bordered-chip {
padding: 0.1em 1em;
border: 0.1em solid rgb(218, 227, 243);
border-radius: 10em;
background-color: rgb(236, 241, 249);
color: var(--primary-color);
text-transform: uppercase;
font-weight: 500;
max-width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
// .bordered-chip {
// padding: 0.1em 1em;
// border: 0.1em solid rgb(218, 227, 243);
// border-radius: 10em;
// background-color: rgb(236, 241, 249);
// color: var(--primary-color);
// text-transform: uppercase;
// font-weight: 500;
// max-width: 160px;
// white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis;
// }
.squared-chip {
padding: 0.1em 1em;
border: 0.1em solid rgb(236, 241, 249);
border-radius: 0.5em;
background-color: rgb(246, 246, 246);
color: rgb(127, 127, 127);
max-width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
// .squared-chip {
// padding: 0.1em 1em;
// border: 0.1em solid rgb(236, 241, 249);
// border-radius: 0.5em;
// background-color: rgb(246, 246, 246);
// color: rgb(127, 127, 127);
// max-width: 160px;
// white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis;
// }
mat-icon {
width: auto;
height: auto;
}
// mat-icon {
// width: auto;
// height: auto;
// }
.mr-5 {
margin-right: 2rem !important;
}
// .mr-5 {
// margin-right: 2rem !important;
// }
.info {
background-color: #f6f6f6;
padding: 8px 15px;
margin-bottom: 15px;
}
// .info {
// background-color: #f6f6f6;
// padding: 8px 15px;
// margin-bottom: 15px;
// }
.info p {
margin-bottom: 0px;
color: rgb(37, 35, 140);
font-weight: 600;
}
// .info p {
// margin-bottom: 0px;
// color: rgb(37, 35, 140);
// font-weight: 600;
// }
.chip p {
margin-bottom: 0px;
}
// .chip p {
// margin-bottom: 0px;
// }
h4 span {
color: #089dbb;
font-weight: 600;
}
}
// h4 span {
// color: #089dbb;
// font-weight: 600;
// }
// }
.listing {
.mat-card {
@ -300,10 +319,10 @@ $mat-accessibility-theme: mat.m2-define-light-theme((color: (primary: $mat-theme
}
}
.gray-container {
background: linear-gradient(180deg, #f6f6f6, #fff);
margin: 5px 0px;
}
// .gray-container {
// background: linear-gradient(180deg, #f6f6f6, #fff);
// margin: 5px 0px;
// }
.main-content {
background-color: #f5f5f5;
@ -488,7 +507,7 @@ button, .mdc-button, .mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[
background: var(--inverted-btn-color);
&:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
color: var(--primary-color);
opacity: 0.7;
opacity: 0.5;
}
&.primary-inverted-hover:hover {
background-color: var(--primary-color);
@ -686,4 +705,4 @@ ul.unstyled-list {
// }
// .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
// background-color: #b0b0b0;
// }
// } //make them work