change gray color var to #707070, add dark gray color var, add accessibility rules to plan-overview page

This commit is contained in:
mchouliara 2024-09-23 16:53:15 +03:00
parent 3e10e4df1e
commit 412b54be5f
67 changed files with 231 additions and 196 deletions

View File

@ -19,7 +19,7 @@
</mat-chip-grid> </mat-chip-grid>
</div> </div>
<div class="col-12"> <div class="col-12">
<input matInput #autocompleteInput [id]="id" [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" autocomplete="off" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)"> <input matInput #autocompleteInput [id]="id" [name]="id" autocomplete="off" #autocompleteTrigger="matAutocompleteTrigger" autocomplete="off" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)">
</div> </div>
<mat-autocomplete #autocomplete="matAutocomplete" [displayWith]="_displayFn.bind(this)" (optionSelected)="_optionSelected($event)" [classList]="['myClass']"> <mat-autocomplete #autocomplete="matAutocomplete" [displayWith]="_displayFn.bind(this)" (optionSelected)="_optionSelected($event)" [classList]="['myClass']">
<div (mouseover)="isMouseOverPanel=true" (mouseout)="isMouseOverPanel=false"> <div (mouseover)="isMouseOverPanel=true" (mouseout)="isMouseOverPanel=false">

View File

@ -119,7 +119,7 @@ ngx-guided-tour {
padding: 28px 5px 25px 65px; padding: 28px 5px 25px 65px;
overflow: auto; overflow: auto;
text-align: left; text-align: left;
color: #212121; color: var(--dark-gray);
line-height: 26px; line-height: 26px;
white-space: pre-line; white-space: pre-line;
} }

View File

@ -75,14 +75,14 @@ $blue-color-light: #5cf7f2;
.numbering-label .mat-input-element:disabled{ .numbering-label .mat-input-element:disabled{
color: #212121; color: var(--dark-gray);
} }
:host ::ng-deep .fieldset-checkbox-action-description-template-editor :host ::ng-deep .fieldset-checkbox-action-description-template-editor
{ {
.mat-checkbox-label{ .mat-checkbox-label{
font-size: 0.8em; font-size: 0.8em;
color: #212121; color: var(--dark-gray);
transform: translateY(3px); transform: translateY(3px);
} }
.mat-checkbox-frame{ .mat-checkbox-frame{
@ -93,7 +93,7 @@ $blue-color-light: #5cf7f2;
.fieldset-new-input-action { .fieldset-new-input-action {
font-size: 0.8em; font-size: 0.8em;
font-weight: 400; font-weight: 400;
color: #212121; color: var(--dark-gray);
display: inline-block; display: inline-block;
transform: translateY(1px); transform: translateY(1px);
} }
@ -139,7 +139,7 @@ $blue-color-light: #5cf7f2;
::ng-deep label { ::ng-deep label {
margin: 0; margin: 0;
color: #212121; color: var(--dark-gray);
} }
.numbering { .numbering {

View File

@ -24,7 +24,7 @@ li.list-inline-item{
{ {
.mat-slide-toggle-content{ .mat-slide-toggle-content{
font-size: 0.8em; font-size: 0.8em;
color: #212121; color: var(--dark-gray);
} }
.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb { .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
background-color:var(--primary-color) ; background-color:var(--primary-color) ;

View File

@ -66,7 +66,7 @@ $blue-color-light: #5cf7f2;
} }
} }
.action-list-label{ .action-list-label{
color: #212121; color: var(--dark-gray);
font-size: small; font-size: small;
opacity: 0.6; opacity: 0.6;
} }

View File

@ -14,7 +14,7 @@
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 0.81; opacity: 0.81;
margin-bottom: 0.625rem; margin-bottom: 0.625rem;
} }
@ -24,7 +24,7 @@
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 0.81; opacity: 0.81;
margin-bottom: 0.125rem; margin-bottom: 0.125rem;
} }

View File

@ -29,7 +29,7 @@
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 0.81; opacity: 0.81;
margin-bottom: 0.625rem; margin-bottom: 0.625rem;
} }
@ -39,7 +39,7 @@
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 0.81; opacity: 0.81;
margin-bottom: 0.125rem; margin-bottom: 0.125rem;
} }
@ -87,7 +87,7 @@ $blue-color-light: #5cf7f2;
transition-duration: 200ms; transition-duration: 200ms;
transition-delay: 50ms; transition-delay: 50ms;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
color: #212121; color: var(--dark-gray);
font-size: 0.9em; font-size: 0.9em;
} }
@ -140,7 +140,7 @@ $blue-color-light: #5cf7f2;
} }
} }
.action-list-label{ .action-list-label{
color: #212121; color: var(--dark-gray);
font-size: small; font-size: small;
opacity: 0.6; opacity: 0.6;
} }

View File

@ -28,7 +28,7 @@ $scroller-height: 3em;
#guide-steps{ #guide-steps{
color: #212121; color: var(--dark-gray);
opacity: 0.6; opacity: 0.6;
font-size: 1.6em; font-size: 1.6em;
margin-top: 0px; margin-top: 0px;

View File

@ -9,7 +9,7 @@
border-radius: 30px; border-radius: 30px;
min-width: 101px; min-width: 101px;
height: 43px; height: 43px;
color: #212121; color: var(--dark-gray);
font-weight: 500; font-weight: 500;
} }

View File

@ -23,7 +23,7 @@
.hint { .hint {
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
color: #212121; color: var(--dark-gray);
opacity: 0.81; opacity: 0.81;
} }
@ -45,7 +45,7 @@
.select-role { .select-role {
width: 50% !important; width: 50% !important;
font-size: 14px; font-size: 14px;
color: var(--gray-text); color: var(--gray);
height: min-content; height: min-content;
margin-right: 2rem; margin-right: 2rem;
border: none; border: none;

View File

@ -45,10 +45,10 @@ $mat-card-header-size: 40px !default;
.upload-btn { .upload-btn {
background-color: white; background-color: white;
color: #212121; color: var(--dark-gray);
font-weight: bold; font-weight: bold;
box-shadow: 0px 3px 6px #1e202029; box-shadow: 0px 3px 6px #1e202029;
border: 2px solid #212121; border: 2px solid var(--dark-gray);
} }
.actions { .actions {

View File

@ -6,7 +6,7 @@
.merge-account-title { .merge-account-title {
font-size: 1.25rem; font-size: 1.25rem;
color: #212121; color: var(--dark-gray);
padding-top: 4.1875rem; padding-top: 4.1875rem;
padding-left: 3.75rem; padding-left: 3.75rem;
padding-bottom: 4.0625rem; padding-bottom: 4.0625rem;

View File

@ -6,7 +6,7 @@
.unlink-account-title { .unlink-account-title {
font-size: 1.25rem; font-size: 1.25rem;
color: #212121; color: var(--dark-gray);
padding-top: 4.1875rem; padding-top: 4.1875rem;
padding-left: 3.75rem; padding-left: 3.75rem;
padding-bottom: 4.0625rem; padding-bottom: 4.0625rem;

View File

@ -6,7 +6,7 @@
.user-invite-title { .user-invite-title {
font-size: 1.25rem; font-size: 1.25rem;
color: #212121; color: var(--dark-gray);
padding-top: 4.1875rem; padding-top: 4.1875rem;
padding-left: 3.75rem; padding-left: 3.75rem;
padding-bottom: 4.0625rem; padding-bottom: 4.0625rem;

View File

@ -58,6 +58,6 @@ img {
opacity: 1; opacity: 1;
min-width: 101px; min-width: 101px;
height: 43px; height: 43px;
color: #212121; color: var(--dark-gray);
font-weight: 500; font-weight: 500;
} }

View File

@ -6,7 +6,7 @@
<div class="col-12 col-xl-10"> <div class="col-12 col-xl-10">
<div class="row"> <div class="row">
<div *ngIf="newReleaseNotificationVisible" class="new-releases-card col-auto mt-0 pt-2 mr-4"> <div *ngIf="newReleaseNotificationVisible" class="new-releases-card col-auto mt-0 pt-2 mr-4">
<button mat-icon-button aria-label="close release notifications" (click)="dismissNewReleaseNotification()"> <button mat-icon-button aria-label="{{'ALT-TEXT.CLOSE-RELEASE' | translate}}" (click)="dismissNewReleaseNotification()">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
<div class="row new-releases-hint-container m-0"> <div class="row new-releases-hint-container m-0">
@ -27,7 +27,7 @@
</div> </div>
</div> </div>
<div class="card col-auto mt-0 pt-2" [style.display]="isIntroCardVisible ? 'block' : 'none'"> <div class="card col-auto mt-0 pt-2" [style.display]="isIntroCardVisible ? 'block' : 'none'">
<button mat-icon-button aria-label="close intro card" *ngIf="this.hasPlans()" (click)="dismissIntroCard()"> <button mat-icon-button aria-label="{{'ALT-TEXT.CLOSE-INTRO-CARD' | translate}}" *ngIf="this.hasPlans()" (click)="dismissIntroCard()">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
@ -168,7 +168,7 @@
<div class="col-12 col-xl"> <div class="col-12 col-xl">
<div class="row"> <div class="row">
<div class="col-auto card" [style.display]="isIntroCardVisible ? 'block' : 'none'"> <div class="col-auto card" [style.display]="isIntroCardVisible ? 'block' : 'none'">
<button mat-icon-button (click)="dismissIntroCard()" aria-label="close intro card"> <button mat-icon-button (click)="dismissIntroCard()" aria-label="{{'ALT-TEXT.CLOSE-INTRO-CARD' | translate}}">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
<div class="d-flex flex-column align-items-center non-auth-title-container"> <div class="d-flex flex-column align-items-center non-auth-title-container">

View File

@ -23,7 +23,7 @@
text-align: left; text-align: left;
font: Bold 20px/30px Roboto; font: Bold 20px/30px Roboto;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
padding-left: 40px; padding-left: 40px;
padding-right: 55px; padding-right: 55px;
opacity: 1; opacity: 1;
@ -34,7 +34,7 @@
font-weight: 300; font-weight: 300;
font-size: 1rem; font-size: 1rem;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
padding-left: 40px; padding-left: 40px;
padding-top: 36px; padding-top: 36px;
padding-right: 55px; padding-right: 55px;
@ -43,7 +43,7 @@
.clear-icon { .clear-icon {
cursor: pointer; cursor: pointer;
color: #212121; color: var(--dark-gray);
padding: 0.4rem; padding: 0.4rem;
} }
@ -108,7 +108,7 @@
text-align: left; text-align: left;
font: Bold 48px/30px Roboto; font: Bold 48px/30px Roboto;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 0.85; opacity: 0.85;
padding-top: 2.5rem; padding-top: 2.5rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
@ -129,7 +129,7 @@
font-weight: 300; font-weight: 300;
font-size: 1rem; font-size: 1rem;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 0.6; opacity: 0.6;
} }
@ -138,7 +138,7 @@
font-weight: 300; font-weight: 300;
font-size: 1.25rem; font-size: 1.25rem;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 0.6; opacity: 0.6;
padding-bottom: 1.2rem; padding-bottom: 1.2rem;
} }
@ -192,7 +192,7 @@ input[type="text"] {
line-height: 2.8; line-height: 2.8;
font-size: 0.875rem; font-size: 0.875rem;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
font-weight: 400; font-weight: 400;
} }
@ -218,12 +218,12 @@ input[type="text"] {
flex-direction: row; flex-direction: row;
border-top: 1px solid #dbdbdb; border-top: 1px solid #dbdbdb;
line-height: 4; line-height: 4;
color: var(--gray-text); color: var(--gray);
} }
.description-card-actions a, .description-card-actions a,
.plan-card-actions a { .plan-card-actions a {
color: var(--gray-text) !important; color: var(--gray) !important;
text-decoration: none !important; text-decoration: none !important;
} }
@ -262,11 +262,11 @@ input[type="text"] {
} }
.empty-list { .empty-list {
color: #212121; color: var(--dark-gray);
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 300; font-weight: 300;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 0.6; opacity: 0.6;
display: flex; display: flex;
padding-top: 4.68rem; padding-top: 4.68rem;
@ -380,7 +380,7 @@ mat-tab-group.my-mat-tab .mat-mdc-tab-header .mat-mdc-tab-label-container .mat-m
text-align: left; text-align: left;
font: Bold 30px/34px Roboto; font: Bold 30px/34px Roboto;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
padding-left: 40px; padding-left: 40px;
padding-right: 55px; padding-right: 55px;
opacity: 1; opacity: 1;
@ -391,7 +391,7 @@ mat-tab-group.my-mat-tab .mat-mdc-tab-header .mat-mdc-tab-label-container .mat-m
font-weight: 300; font-weight: 300;
font-size: 1rem; font-size: 1rem;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
padding-left: 40px; padding-left: 40px;
font: normal normal normal 16px/24px Roboto; font: normal normal normal 16px/24px Roboto;
padding-top: 36px; padding-top: 36px;

View File

@ -34,7 +34,7 @@ input[type="text"] {
flex-direction: row; flex-direction: row;
border-top: 1px solid #dbdbdb; border-top: 1px solid #dbdbdb;
line-height: 4; line-height: 4;
color: var(--gray-text); color: var(--gray);
} }
.description-card-actions, .description-card-actions,
@ -43,12 +43,12 @@ input[type="text"] {
flex-direction: row; flex-direction: row;
border-top: 1px solid #dbdbdb; border-top: 1px solid #dbdbdb;
line-height: 4; line-height: 4;
color: var(--gray-text); color: var(--gray);
} }
.description-card-actions a, .description-card-actions a,
.plan-card-actions a { .plan-card-actions a {
color: var(--gray-text) !important; color: var(--gray) !important;
text-decoration: none !important; text-decoration: none !important;
} }
@ -115,7 +115,7 @@ input[type="text"] {
font-weight: 300; font-weight: 300;
font-size: 1.25rem; font-size: 1.25rem;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 0.6; opacity: 0.6;
} }

View File

@ -12,7 +12,7 @@
border-radius: 30px; border-radius: 30px;
min-width: 101px; min-width: 101px;
height: 43px; height: 43px;
color: #212121; color: var(--dark-gray);
font-weight: 500; font-weight: 500;
} }

View File

@ -4,7 +4,7 @@
text-align: left; text-align: left;
font-weight: 400; font-weight: 400;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 1; opacity: 1;
margin: 3rem 0rem 3rem 0rem; margin: 3rem 0rem 3rem 0rem;
} }
@ -14,7 +14,7 @@
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 0.81; opacity: 0.81;
margin-top: 1.625rem; margin-top: 1.625rem;
margin-bottom: 0.625rem; margin-bottom: 0.625rem;
@ -25,7 +25,7 @@
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 0.81; opacity: 0.81;
margin-bottom: 2.125rem; margin-bottom: 2.125rem;
} }
@ -44,7 +44,7 @@
.input-btn { .input-btn {
border: none; border: none;
color: var(--gray-text); color: var(--gray);
background-color: #ffffff00; background-color: #ffffff00;
cursor: pointer; cursor: pointer;
} }

View File

@ -75,7 +75,7 @@
.more-horiz { .more-horiz {
font-size: 28px; font-size: 28px;
color: var(--gray-text); color: var(--gray);
} }
.more-icon :hover { .more-icon :hover {
@ -112,7 +112,7 @@
.description-title { .description-title {
text-align: left; text-align: left;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 0.9; opacity: 0.9;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
@ -132,7 +132,7 @@
.description-subtitle { .description-subtitle {
text-align: left; text-align: left;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
font-weight: 700; font-weight: 700;
font-size: 16px; font-size: 16px;
opacity: 0.9; opacity: 0.9;
@ -143,7 +143,7 @@
.description-discard-btn { .description-discard-btn {
border: 1px solid #212121; border: 1px solid var(--dark-gray);
background-color: transparent; background-color: transparent;
font-weight: 700; font-weight: 700;
display: flex; display: flex;
@ -183,7 +183,7 @@
text-align: left; text-align: left;
font-weight: 700; font-weight: 700;
font-size: 1rem; font-size: 1rem;
color: #212121; color: var(--dark-gray);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -209,7 +209,7 @@
height: calc(100vh - 650px); height: calc(100vh - 650px);
overflow-y: auto; overflow-y: auto;
.main-info { .main-info {
color: #21212194; color: var(--dark-gray)94;
font-weight: 400; font-weight: 400;
cursor: pointer; cursor: pointer;
} }
@ -224,7 +224,7 @@
padding-left: 0.5rem; padding-left: 0.5rem;
font-size: 0.875rem; font-size: 0.875rem;
letter-spacing: 0px; letter-spacing: 0px;
color: var(--gray-text); color: var(--gray);
opacity: 1; opacity: 1;
} }
@ -233,7 +233,7 @@
font-weight: 300; font-weight: 300;
font-size: 20px; font-size: 20px;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 0.6; opacity: 0.6;
margin: 2.875rem 0rem 2.25rem 0rem; margin: 2.875rem 0rem 2.25rem 0rem;
padding-left: 1rem; padding-left: 1rem;
@ -245,7 +245,7 @@
text-align: left; text-align: left;
font-weight: 400; font-weight: 400;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
padding: 0.3rem 0.1rem; padding: 0.3rem 0.1rem;
opacity: 0.6; opacity: 0.6;
cursor: pointer; cursor: pointer;
@ -260,13 +260,13 @@
} }
.stepper-list .active { .stepper-list .active {
color: #212121; color: var(--dark-gray);
font-weight: 700; font-weight: 700;
opacity: 1; opacity: 1;
} }
.stepper-list .active-description { .stepper-list .active-description {
color: #212121; color: var(--dark-gray);
font-weight: 700; font-weight: 700;
opacity: 1; opacity: 1;
.label { .label {
@ -321,10 +321,10 @@
} }
.previous { .previous {
color: #212121; color: var(--dark-gray);
background: #f5f5f5 0% 0% no-repeat padding-box; background: #f5f5f5 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #1e202029; box-shadow: 0px 3px 6px #1e202029;
border: 2px solid #212121; border: 2px solid var(--dark-gray);
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
} }
@ -339,7 +339,7 @@
.description-next { .description-next {
background: var(--secondary-color) 0% 0% no-repeat padding-box; background: var(--secondary-color) 0% 0% no-repeat padding-box;
color: #212121; color: var(--dark-gray);
box-shadow: 0px 3px 6px #1e202029; box-shadow: 0px 3px 6px #1e202029;
font-weight: 700; font-weight: 700;
cursor: pointer; cursor: pointer;

View File

@ -3,6 +3,6 @@
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 0.81; opacity: 0.81;
} }

View File

@ -4,7 +4,7 @@
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 0.81; opacity: 0.81;
margin-top: 1.625rem; margin-top: 1.625rem;
margin-bottom: 0.625rem; margin-bottom: 0.625rem;
@ -47,12 +47,12 @@ h6 {
@keyframes titleFocus { @keyframes titleFocus {
0% { 0% {
color: #212121; color: var(--dark-gray);
} }
50% { 50% {
color: var(--primary-color); color: var(--primary-color);
} }
100% { 100% {
color: #212121; color: var(--dark-gray);
} }
} }

View File

@ -15,7 +15,7 @@
font-weight: 700; font-weight: 700;
font-size: 1rem; font-size: 1rem;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 0.81; opacity: 0.81;
margin-top: 1.625rem; margin-top: 1.625rem;
margin-bottom: 0.625rem; margin-bottom: 0.625rem;

View File

@ -13,7 +13,7 @@
text-align: left; text-align: left;
font-weight: 400; font-weight: 400;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 1; opacity: 1;
margin: 3rem 0rem 3rem 0rem; margin: 3rem 0rem 3rem 0rem;
} }

View File

@ -1,5 +1,5 @@
.percentage { .percentage {
color: #212121; color: var(--dark-gray);
opacity: 0.7; opacity: 0.7;
font-weight: 400; font-weight: 400;
font-size: 0.875rem; font-size: 0.875rem;

View File

@ -4,7 +4,7 @@
width: 100%; width: 100%;
height: 60px; height: 60px;
background-color: var(--secondary-color); background-color: var(--secondary-color);
color: #212121; color: var(--dark-gray);
font-size: 1.25rem; font-size: 1.25rem;
} }

View File

@ -24,7 +24,7 @@
} }
.selected { .selected {
color: #212121; color: var(--dark-gray);
font-weight: 700 !important; font-weight: 700 !important;
opacity: 1 !important; opacity: 1 !important;
} }

View File

@ -35,7 +35,7 @@ span {
text-decoration: none; text-decoration: none;
display: block; display: block;
overflow: hidden; overflow: hidden;
color: #21212194; color: var(--dark-gray)94;
font-weight: 400; font-weight: 400;
span { span {
@ -48,7 +48,7 @@ span {
} }
.selected { .selected {
color: #212121 !important; color: var(--dark-gray) !important;
font-weight: 700 !important; font-weight: 700 !important;
opacity: 1 !important; opacity: 1 !important;
} }

View File

@ -2,7 +2,7 @@
text-align: left; text-align: left;
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 300; font-weight: 300;
color: #212121; color: var(--dark-gray);
padding: 0px; padding: 0px;
} }
@ -43,7 +43,7 @@
text-align: left; text-align: left;
font: Bold 20px/30px Roboto; font: Bold 20px/30px Roboto;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
padding-left: 40px; padding-left: 40px;
padding-right: 55px; padding-right: 55px;
opacity: 1; opacity: 1;
@ -53,7 +53,7 @@
text-align: left; text-align: left;
font-weight: 300; font-weight: 300;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
padding-left: 40px; padding-left: 40px;
padding-top: 36px; padding-top: 36px;
padding-right: 55px; padding-right: 55px;
@ -62,7 +62,7 @@
.clear-icon { .clear-icon {
cursor: pointer; cursor: pointer;
color: #212121; color: var(--dark-gray);
padding: 0.4rem; padding: 0.4rem;
} }
@ -78,7 +78,7 @@
font-weight: 300; font-weight: 300;
font-size: 1rem; font-size: 1rem;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
} }
.filter-btn { .filter-btn {
@ -123,7 +123,7 @@
font-weight: 300; font-weight: 300;
font-size: 1.25rem; font-size: 1.25rem;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 0.6; opacity: 0.6;
} }

View File

@ -1,6 +1,6 @@
.clear-icon { .clear-icon {
cursor: pointer; cursor: pointer;
color: #212121; color: var(--dark-gray);
padding: 0.4rem; padding: 0.4rem;
} }

View File

@ -1,6 +1,6 @@
.gray-container { .gray-container {
letter-spacing: 5px; letter-spacing: 5px;
color: var(--gray-text); color: var(--gray);
} }
.container-header { .container-header {
@ -12,7 +12,7 @@
.container-header p { .container-header p {
letter-spacing: 5px; letter-spacing: 5px;
color: var(--gray-text); color: var(--gray);
padding-top: 10px; padding-top: 10px;
margin-bottom: 0px; margin-bottom: 0px;
} }
@ -57,7 +57,7 @@ h4 > span {
margin-left: auto; margin-left: auto;
margin-bottom: 0px; margin-bottom: 0px;
padding-top: 7px; padding-top: 7px;
color: var(--gray-text); color: var(--gray);
} }
p { p {
@ -106,7 +106,7 @@ input[type="text"] {
font-weight: 300; font-weight: 300;
line-height: 2.4; line-height: 2.4;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 0.6; opacity: 0.6;
} }
@ -130,7 +130,7 @@ input[type="text"] {
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 400; font-weight: 400;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
} }
.plan-title, .plan-title,
@ -140,7 +140,7 @@ input[type="text"] {
font-size: 1rem; font-size: 1rem;
padding-top: 0.75rem; padding-top: 0.75rem;
padding-bottom: 0.55rem; padding-bottom: 0.55rem;
color: #212121; color: var(--dark-gray);
} }
.description-subtitle { .description-subtitle {
@ -151,7 +151,7 @@ input[type="text"] {
font-size: 0.875rem; font-size: 0.875rem;
opacity: 1; opacity: 1;
align-items: center; align-items: center;
color: var(--gray-text); color: var(--gray);
} }
.description-title-draft { .description-title-draft {
@ -185,12 +185,12 @@ input[type="text"] {
flex-direction: row; flex-direction: row;
border-top: 1px solid #dbdbdb; border-top: 1px solid #dbdbdb;
line-height: 4; line-height: 4;
color: var(--gray-text); color: var(--gray);
} }
.description-card-actions a, .description-card-actions a,
.plan-card-actions a { .plan-card-actions a {
color: var(--gray-text) !important; color: var(--gray) !important;
text-decoration: none !important; text-decoration: none !important;
} }

View File

@ -12,7 +12,7 @@
.mat-mini-fab { .mat-mini-fab {
width: 2.5em; width: 2.5em;
height: 2.5em; height: 2.5em;
color: #212121; color: var(--dark-gray);
background-color: var(--secondary-color); background-color: var(--secondary-color);
} }
@ -82,7 +82,7 @@
} }
.frame-btn { .frame-btn {
border: 1px solid #212121; border: 1px solid var(--dark-gray);
color: black; color: black;
background: #ffffff; background: #ffffff;
} }
@ -108,7 +108,7 @@
height: 2.9em; height: 2.9em;
background: #ffffff; background: #ffffff;
box-shadow: 0px 3px 6px #1e202029; box-shadow: 0px 3px 6px #1e202029;
border: 2px solid #212121; border: 2px solid var(--dark-gray);
border-radius: 30px; border-radius: 30px;
} }
@ -139,7 +139,7 @@
.label-txt, .label-txt,
.label2-txt { .label2-txt {
color: var(--gray-text); color: var(--gray);
font-weight: 400; font-weight: 400;
} }
@ -167,13 +167,13 @@
.description-label, .description-label,
.header { .header {
font-size: 1.25em; font-size: 1.25em;
color: #212121; color: var(--dark-gray);
} }
.desc-txt { .desc-txt {
width: 48.25em; width: 48.25em;
font-size: 1em; font-size: 1em;
color: #212121; color: var(--dark-gray);
margin-bottom: 1.875em; margin-bottom: 1.875em;
} }
@ -191,7 +191,7 @@
.doi-label { .doi-label {
font-size: 1em; font-size: 1em;
color: #212121; color: var(--dark-gray);
opacity: 0.6; opacity: 0.6;
margin-bottom: 0.3em; margin-bottom: 0.3em;
} }

View File

@ -29,7 +29,7 @@
font-weight: 500; font-weight: 500;
font-size: 1.25rem; font-size: 1.25rem;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 1; opacity: 1;
} }

View File

@ -14,7 +14,7 @@
.clear-icon { .clear-icon {
cursor: pointer; cursor: pointer;
color: #212121; color: var(--dark-gray);
padding: 0.4rem; padding: 0.4rem;
width: auto !important; width: auto !important;
height: auto !important; height: auto !important;

View File

@ -4,7 +4,7 @@
} }
.profile-settings { .profile-settings {
color: #212121; color: var(--dark-gray);
text-align: left; text-align: left;
} }

View File

@ -6,7 +6,7 @@
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 0.81; opacity: 0.81;
margin-bottom: 0.625rem; margin-bottom: 0.625rem;
} }
@ -16,7 +16,7 @@
font-weight: 700; font-weight: 700;
font-size: 20px; font-size: 20px;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 0.81; opacity: 0.81;
margin-bottom: 0.625rem; margin-bottom: 0.625rem;
} }

View File

@ -1,5 +1,5 @@
.frame-btn { .frame-btn {
border: 1px solid #212121; border: 1px solid var(--dark-gray);
color: black; color: black;
background: #ffffff; background: #ffffff;
box-shadow: 0px 2px 6px #00000029; box-shadow: 0px 2px 6px #00000029;

View File

@ -23,7 +23,7 @@
.hint { .hint {
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
color: #212121; color: var(--dark-gray);
opacity: 0.81; opacity: 0.81;
} }
@ -45,7 +45,7 @@
.select-role { .select-role {
width: 50% !important; width: 50% !important;
font-size: 14px; font-size: 14px;
color: var(--gray-text); color: var(--gray);
height: min-content; height: min-content;
margin-right: 2rem; margin-right: 2rem;
border: none; border: none;

View File

@ -1,6 +1,6 @@
.clear-icon { .clear-icon {
cursor: pointer; cursor: pointer;
color: #212121; color: var(--dark-gray);
padding: 0.4rem; padding: 0.4rem;
} }

View File

@ -1,6 +1,6 @@
.gray-container { .gray-container {
letter-spacing: 5px; letter-spacing: 5px;
color: var(--gray-text); color: var(--gray);
} }
.container-header { .container-header {
@ -12,7 +12,7 @@
.container-header p { .container-header p {
letter-spacing: 5px; letter-spacing: 5px;
color: var(--gray-text); color: var(--gray);
margin-bottom: 0px; margin-bottom: 0px;
} }
@ -53,7 +53,7 @@ h4 > span {
margin-left: auto; margin-left: auto;
margin-bottom: 0px; margin-bottom: 0px;
padding-top: 7px; padding-top: 7px;
color: var(--gray-text); color: var(--gray);
} }
p { p {
@ -61,7 +61,7 @@ p {
} }
.draft-icon { .draft-icon {
color: var(--gray-text); color: var(--gray);
} }
.lock-icon { .lock-icon {
@ -70,7 +70,7 @@ p {
.more-horiz { .more-horiz {
font-size: 28px; font-size: 28px;
color: var(--gray-text); color: var(--gray);
} }
.published-icon { .published-icon {
@ -137,7 +137,7 @@ input[type="text"] {
font-weight: 300; font-weight: 300;
line-height: 2.4; line-height: 2.4;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 0.6; opacity: 0.6;
} }
@ -158,7 +158,7 @@ input[type="text"] {
font-size: 1rem; font-size: 1rem;
padding-top: 0.75rem; padding-top: 0.75rem;
padding-bottom: 0.55rem; padding-bottom: 0.55rem;
color: #212121; color: var(--dark-gray);
} }
.description-subtitle, .description-subtitle,
@ -170,7 +170,7 @@ input[type="text"] {
font-size: 0.875rem; font-size: 0.875rem;
opacity: 1; opacity: 1;
align-items: center; align-items: center;
color: var(--gray-text); color: var(--gray);
} }
.plan-title-draft, .plan-title-draft,
@ -205,12 +205,12 @@ input[type="text"] {
flex-direction: row; flex-direction: row;
border-top: 1px solid #dbdbdb; border-top: 1px solid #dbdbdb;
line-height: 4; line-height: 4;
color: var(--gray-text); color: var(--gray);
} }
.description-card-actions a, .description-card-actions a,
.plan-card-actions a { .plan-card-actions a {
color: var(--gray-text) !important; color: var(--gray) !important;
text-decoration: none !important; text-decoration: none !important;
} }

View File

@ -53,7 +53,7 @@
.more-horiz { .more-horiz {
font-size: 28px; font-size: 28px;
color: var(--gray-text); color: var(--gray);
} }
.more-icon :hover { .more-icon :hover {
@ -64,7 +64,7 @@
text-align: left; text-align: left;
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 300; font-weight: 300;
color: #212121; color: var(--dark-gray);
padding: 0px; padding: 0px;
} }
@ -105,7 +105,7 @@
text-align: left; text-align: left;
font: Bold 20px/30px Roboto; font: Bold 20px/30px Roboto;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
padding-left: 40px; padding-left: 40px;
padding-right: 55px; padding-right: 55px;
opacity: 1; opacity: 1;
@ -115,7 +115,7 @@
text-align: left; text-align: left;
font-weight: 300; font-weight: 300;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
padding-left: 40px; padding-left: 40px;
padding-top: 38px; padding-top: 38px;
padding-right: 55px; padding-right: 55px;
@ -124,7 +124,7 @@
.clear-icon { .clear-icon {
cursor: pointer; cursor: pointer;
color: #212121; color: var(--dark-gray);
padding: 0.4rem; padding: 0.4rem;
} }
@ -140,7 +140,7 @@
font-weight: 300; font-weight: 300;
font-size: 1rem; font-size: 1rem;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
} }
.filter-btn { .filter-btn {
@ -179,7 +179,7 @@
font-weight: 300; font-weight: 300;
font-size: 1.25rem; font-size: 1.25rem;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 0.6; opacity: 0.6;
} }

View File

@ -6,7 +6,7 @@
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 0.81; opacity: 0.81;
margin-bottom: 0.625rem; margin-bottom: 0.625rem;
} }
@ -16,7 +16,7 @@
font-weight: 700; font-weight: 700;
font-size: 20px; font-size: 20px;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 0.81; opacity: 0.81;
margin-bottom: 0.625rem; margin-bottom: 0.625rem;
} }

View File

@ -44,9 +44,9 @@
.upload-btn { .upload-btn {
background-color: white; background-color: white;
color: #212121; color: var(--dark-gray);
font-weight: bold; font-weight: bold;
border: 2px solid #212121; border: 2px solid var(--dark-gray);
} }
.actions { .actions {

View File

@ -7,7 +7,7 @@
</div> </div>
<div class="col-12 mb-4 pl-1"> <div class="col-12 mb-4 pl-1">
<a (click)="goBack()" role="button"> <a (click)="goBack()" role="button">
<mat-icon class="back-icon pointer">chevron_left</mat-icon> <mat-icon class="back-icon pointer" aria-hidden>chevron_left</mat-icon>
<span class="label-txt pointer">{{'PLAN-OVERVIEW.ACTIONS.BACK' | translate}}</span> <span class="label-txt pointer">{{'PLAN-OVERVIEW.ACTIONS.BACK' | translate}}</span>
</a> </a>
</div> </div>
@ -60,24 +60,24 @@
<div class="row mb-4" *ngIf="!lockStatus || canClonePlan() || (canDeletePlan() && !isLocked)"> <div class="row mb-4" *ngIf="!lockStatus || canClonePlan() || (canDeletePlan() && !isLocked)">
<div class="col-auto pr-0"> <div class="col-auto pr-0">
@if(isActive && canEditPlan(plan) && !lockStatus){ @if(isActive && canEditPlan(plan) && !lockStatus){
<button (click)="editClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.EDIT' | translate}}" matTooltipPosition="above"> <button [attr.aria-label]="'PLAN-OVERVIEW.ACTIONS.EDIT' | translate" (click)="editClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.EDIT' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-mini-fab-icon">create</mat-icon> <mat-icon class="mat-mini-fab-icon">create</mat-icon>
</button> </button>
} @else { } @else {
@if(!isPublicView){ @if(!isPublicView){
<button (click)="editClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.PREVIEW' | translate}}" matTooltipPosition="above"> <button [attr.aria-label]="'PLAN-OVERVIEW.ACTIONS.PREVIEW' | translate" (click)="editClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.PREVIEW' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-mini-fab-icon">visibility</mat-icon> <mat-icon class="mat-mini-fab-icon">visibility</mat-icon>
</button> </button>
} }
} }
</div> </div>
<div *ngIf="canClonePlan()" class="col-auto pr-0"> <div *ngIf="canClonePlan()" class="col-auto pr-0">
<button (click)="cloneClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.CLONE' | translate}}" matTooltipPosition="above"> <button [attr.aria-label]="'PLAN-OVERVIEW.ACTIONS.CLONE' | translate" (click)="cloneClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.CLONE' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-mini-fab-icon">content_copy</mat-icon> <mat-icon class="mat-mini-fab-icon">content_copy</mat-icon>
</button> </button>
</div> </div>
<div *ngIf="canDeletePlan() && !isLocked" class="col-auto pr-0"> <div *ngIf="canDeletePlan() && !isLocked" class="col-auto pr-0">
<button (click)="deleteClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.DELETE' | translate}}" matTooltipPosition="above"> <button [attr.aria-label]="'PLAN-OVERVIEW.ACTIONS.DELETE' | translate" (click)="deleteClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.DELETE' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-mini-fab-icon">delete</mat-icon> <mat-icon class="mat-mini-fab-icon">delete</mat-icon>
</button> </button>
</div> </div>
@ -162,10 +162,10 @@
<span class="text-truncate">{{selectedModel.doi}}</span> <span class="text-truncate">{{selectedModel.doi}}</span>
</div> </div>
<div class="col-auto d-flex"> <div class="col-auto d-flex">
<button (click)="copyDoi(selectedModel.doi)" mat-mini-fab class="mr-2 d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.COPY' | translate}}" matTooltipPosition="above"> <button [attr.aria-label]="'PLAN-OVERVIEW.ACTIONS.COPY' | translate" (click)="copyDoi(selectedModel.doi)" mat-mini-fab class="mr-2 d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.COPY' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-mini-fab-icon">content_copy</mat-icon> <mat-icon class="mat-mini-fab-icon">content_copy</mat-icon>
</button> </button>
<button *ngIf="depositRepos?.length > 0" mat-mini-fab class="mr-2 d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.VISIT-WEBSITE' | translate}}" matTooltipPosition="above"> <button [attr.aria-label]="'PLAN-OVERVIEW.ACTIONS.VISIT-WEBSITE' | translate" *ngIf="depositRepos?.length > 0" mat-mini-fab class="mr-2 d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.VISIT-WEBSITE' | translate}}" matTooltipPosition="above">
<a [href]="createDoiLink(selectedModel)" class="doi-link" target="_blank"> <a [href]="createDoiLink(selectedModel)" class="doi-link" target="_blank">
<mat-icon class="mat-mini-fab-icon">launch</mat-icon> <mat-icon class="mat-mini-fab-icon">launch</mat-icon>
</a> </a>
@ -182,10 +182,10 @@
<div class="col-12"> <div class="col-12">
<div class="frame mb-3 pt-4 pl-4 pr-5 pb-3"> <div class="frame mb-3 pt-4 pl-4 pr-5 pb-3">
<ng-container *ngIf="isDraftPlan() && canFinalizePlan() && !isLocked"> <ng-container *ngIf="isDraftPlan() && canFinalizePlan() && !isLocked">
<div class="row align-items-center" (click)="finalize(plan)"> <div role="button" aria-describedby="{{ 'PLAN-OVERVIEW.ACTIONS.FINALIZE' | translate }}" class="row align-items-center" (click)="finalize(plan)">
<div class="col-auto pr-0"> <div class="col-auto pr-0" aria-hidden>
<button mat-mini-fab class="finalize-btn"> <button mat-mini-fab class="finalize-btn">
<mat-icon class="mat-mini-fab-icon">check</mat-icon> <mat-icon class="mat-mini-fab-icon" aria-hidden>check</mat-icon>
</button> </button>
</div> </div>
<div class="col-auto pl-0"> <div class="col-auto pl-0">
@ -200,8 +200,8 @@
</ng-container> </ng-container>
<app-plan-deposit-dropdown *ngIf="(hasDoi(plan) || moreDeposit()) && isFinalizedPlan(plan) && !this.isPublicView && canDepositPlan(plan) && inputRepos.length > 0" [inputRepos]="inputRepos" [plan]="plan" (outputReposEmitter)="afterDeposit($event)"></app-plan-deposit-dropdown> <app-plan-deposit-dropdown *ngIf="(hasDoi(plan) || moreDeposit()) && isFinalizedPlan(plan) && !this.isPublicView && canDepositPlan(plan) && inputRepos.length > 0" [inputRepos]="inputRepos" [plan]="plan" (outputReposEmitter)="afterDeposit($event)"></app-plan-deposit-dropdown>
<ng-container *ngIf="isFinalizedPlan(plan) && hasDoi(plan) && !isPublishedPlan(plan) && canFinalizePlan(plan)"> <ng-container *ngIf="isFinalizedPlan(plan) && hasDoi(plan) && !isPublishedPlan(plan) && canFinalizePlan(plan)">
<div (click)="reverseFinalization()" class="row mb-3 align-items-center"> <div role="button" aria-describedby="{{ 'PLAN-OVERVIEW.ACTIONS.REVERSE' | translate }}" (click)="reverseFinalization()" class="row mb-3 align-items-center">
<div class="col-auto pr-0"> <div class="col-auto pr-0" aria-hidden>
<button mat-mini-fab class="frame-btn"> <button mat-mini-fab class="frame-btn">
<mat-icon class="mat-mini-fab-icon">unarchive</mat-icon> <mat-icon class="mat-mini-fab-icon">unarchive</mat-icon>
</button> </button>
@ -214,7 +214,7 @@
<ng-container *ngIf="canExportPlan() && fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Plan).length > 0"> <ng-container *ngIf="canExportPlan() && fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Plan).length > 0">
<div class="row mb-3 align-items-center"> <div class="row mb-3 align-items-center">
<div class="col-auto pr-0"> <div class="col-auto pr-0">
<button mat-mini-fab class="frame-btn" [matMenuTriggerFor]="exportMenu"> <button [attr.aria-label]="'ALT-TEXT.OPEN-MENU' | translate" mat-mini-fab class="frame-btn" [matMenuTriggerFor]="exportMenu">
<mat-icon class="mat-mini-fab-icon">open_in_new</mat-icon> <mat-icon class="mat-mini-fab-icon">open_in_new</mat-icon>
</button> </button>
</div> </div>
@ -224,8 +224,8 @@
</div> </div>
</ng-container> </ng-container>
<ng-container *ngIf="canCreateNewVersion()"> <ng-container *ngIf="canCreateNewVersion()">
<div class="row mb-3 align-items-center" (click)="newVersionClicked()"> <div role="button" class="row mb-3 align-items-center" (click)="newVersionClicked()">
<div class="col-auto pr-0"> <div class="col-auto pr-0" aria-hidden>
<button mat-mini-fab class="frame-btn"> <button mat-mini-fab class="frame-btn">
<mat-icon class="mat-mini-fab-icon">add_to_photos</mat-icon> <mat-icon class="mat-mini-fab-icon">add_to_photos</mat-icon>
</button> </button>
@ -259,7 +259,7 @@
/> />
<div *ngIf="canInvitePlanUsers()" class="col-12 d-flex align-items-center justify-content-center mt-2"> <div *ngIf="canInvitePlanUsers()" class="col-12 d-flex align-items-center justify-content-center mt-2">
<button mat-raised-button class="invite-btn" (click)="openShareDialog(plan.id,plan.label)"> <button mat-raised-button class="invite-btn" (click)="openShareDialog(plan.id,plan.label)">
<mat-icon>group_add</mat-icon> <mat-icon ara-hidden>group_add</mat-icon>
{{'PLAN-OVERVIEW.ACTIONS.INVITE-SHORT' | translate}} {{'PLAN-OVERVIEW.ACTIONS.INVITE-SHORT' | translate}}
</button> </button>
</div> </div>

View File

@ -48,7 +48,7 @@
background-color: var(--secondary-color); background-color: var(--secondary-color);
border-radius: 4px; border-radius: 4px;
justify-content: space-between; justify-content: space-between;
color: #212121; color: #1b1b1b;
} }
.description-finalized-btn { .description-finalized-btn {
@ -56,7 +56,7 @@
background-color: #b2f772; background-color: #b2f772;
border-radius: 4px; border-radius: 4px;
justify-content: space-between; justify-content: space-between;
color: #212121; color: #1b1b1b;
} }
.show-more-btn { .show-more-btn {
@ -68,7 +68,7 @@
} }
.frame-btn { .frame-btn {
border: 1px solid #212121; border: 1px solid #1b1b1b;
color: black; color: black;
} }
@ -98,7 +98,7 @@
height: 2.9em; height: 2.9em;
background: #ffffff; background: #ffffff;
box-shadow: 0px 3px 6px #1e202029; box-shadow: 0px 3px 6px #1e202029;
border: 2px solid #212121; border: 2px solid #1b1b1b;
border-radius: 30px; border-radius: 30px;
} }
// ********TEXT******** // ********TEXT********
@ -123,7 +123,7 @@
.label-txt, .label-txt,
.label2-txt { .label2-txt {
color: var(--gray-text); color: var(--dark-gray);
font-weight: 400; font-weight: 400;
} }
@ -150,12 +150,12 @@
.plan-label, .plan-label,
.header { .header {
font-size: 1.25em; font-size: 1.25em;
color: #212121; color: #1b1b1b;
} }
.desc-txt { .desc-txt {
font-size: 1em; font-size: 1em;
color: #212121; color: #1b1b1b;
margin-bottom: 1.875em; margin-bottom: 1.875em;
} }
@ -165,7 +165,7 @@
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: #1b1b1b;
opacity: 0.8; opacity: 0.8;
font-style: normal; font-style: normal;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
@ -255,7 +255,7 @@
} }
.add-description-btn { .add-description-btn {
color: #212121 !important; color: #1b1b1b !important;
} }
.add-description-btn:hover { .add-description-btn:hover {
@ -268,7 +268,7 @@
} }
::ng-deep .mat-select-value { ::ng-deep .mat-select-value {
color: var(--gray-text) !important; color: var(--gray) !important;
} }
.versions-select { .versions-select {
@ -276,7 +276,7 @@
} }
.select-repo { .select-repo {
border-bottom: 1px solid #212121; border-bottom: 1px solid #1b1b1b;
} }
.plan-btn { .plan-btn {

View File

@ -10,11 +10,11 @@
border-radius: 3px; border-radius: 3px;
} }
.author-role { .author-role {
color: #a8a8a8; color: var(--gray);
} }
.author-label { .author-label {
color: #212121; color: var(--dark-gray);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

View File

@ -1,5 +1,5 @@
.percentage { .percentage {
color: #212121; color: var(--dark-gray);
opacity: 0.7; opacity: 0.7;
font-weight: 400; font-weight: 400;
font-size: 0.875rem; font-size: 0.875rem;

View File

@ -44,13 +44,13 @@
text-align: left; text-align: left;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
color: #ffffff; color: var(--primary-text);
opacity: 0.75; opacity: 0.75;
} }
.subtitle { .subtitle {
text-align: left; text-align: left;
color: #ffffff; color: var(--primary-text);
font-weight: 700; font-weight: 700;
font-size: 16px; font-size: 16px;
opacity: 1; opacity: 1;
@ -93,7 +93,7 @@
font-weight: 300; font-weight: 300;
font-size: 20px; font-size: 20px;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 0.6; opacity: 0.6;
margin: 2.875rem 0rem 2.875rem 0rem; margin: 2.875rem 0rem 2.875rem 0rem;
padding-left: 1rem; padding-left: 1rem;
@ -103,7 +103,7 @@
text-align: left; text-align: left;
font-weight: 400; font-weight: 400;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
padding: 0.3rem 0.1rem; padding: 0.3rem 0.1rem;
opacity: 0.6; opacity: 0.6;
cursor: pointer; cursor: pointer;
@ -116,13 +116,13 @@
} }
.stepper-list .active { .stepper-list .active {
color: #212121; color: var(--dark-gray);
font-weight: 700; font-weight: 700;
opacity: 1; opacity: 1;
} }
.stepper-list .active-description { .stepper-list .active-description {
color: #212121; color: var(--dark-gray);
font-weight: 700; font-weight: 700;
opacity: 1; opacity: 1;
.label { .label {
@ -181,10 +181,10 @@ mat-icon.size-16 {
} }
.previous { .previous {
color: #212121; color: var(--dark-gray);
background: #f5f5f5 0% 0% no-repeat padding-box; background: #f5f5f5 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #1e202029; box-shadow: 0px 3px 6px #1e202029;
border: 2px solid #212121; border: 2px solid var(--dark-gray);
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
} }
@ -229,7 +229,7 @@ mat-icon.size-16 {
text-align: left; text-align: left;
font-weight: 400; font-weight: 400;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 1; opacity: 1;
margin: 1rem 0rem 3rem 0rem; margin: 1rem 0rem 3rem 0rem;
} }
@ -277,7 +277,7 @@ a:hover {
text-align: left; text-align: left;
font-weight: 400; font-weight: 400;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 1; opacity: 1;
margin: 3rem 0rem 3rem 0rem; margin: 3rem 0rem 3rem 0rem;
} }
@ -298,7 +298,7 @@ a:hover {
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 0.81; opacity: 0.81;
margin-top: 1.625rem; margin-top: 1.625rem;
margin-bottom: 0.625rem; margin-bottom: 0.625rem;
@ -309,7 +309,7 @@ a:hover {
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 0.81; opacity: 0.81;
margin-bottom: 2.125rem; margin-bottom: 2.125rem;
} }
@ -328,7 +328,7 @@ a:hover {
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 400; font-weight: 400;
padding: 0rem 0.5rem 0rem 0rem; padding: 0rem 0.5rem 0rem 0rem;
color: #212121; color: var(--dark-gray);
} }
.disabled-toggle { .disabled-toggle {
@ -341,7 +341,7 @@ a:hover {
.input-btn { .input-btn {
border: none; border: none;
color: var(--gray-text); color: var(--gray);
background-color: #ffffff00; background-color: #ffffff00;
cursor: pointer; cursor: pointer;
} }
@ -356,7 +356,7 @@ a:hover {
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: var(--dark-gray);
opacity: 0.81; opacity: 0.81;
margin-top: 1.625rem; margin-top: 1.625rem;
margin-bottom: 0.625rem; margin-bottom: 0.625rem;

View File

@ -118,7 +118,7 @@
opacity: 1; opacity: 1;
font-size: 0.87rem; font-size: 0.87rem;
font-weight: 500; font-weight: 500;
color: #212121; color: var(--dark-gray);
cursor: pointer; cursor: pointer;
} }

View File

@ -1,6 +1,6 @@
<mat-form-field class="w-100" *ngIf="multipleAutoCompleteSearchConfiguration"> <mat-form-field class="w-100" *ngIf="multipleAutoCompleteSearchConfiguration">
<mat-label>{{label?.length > 0 ? label : referenceType?.name}}</mat-label> <mat-label>{{label?.length > 0 ? label : referenceType?.name}}</mat-label>
<app-multiple-auto-complete placeholder="{{ placeholder?.length > 0 ? placeholder : referenceType?.name}}" [formControl]="form" [configuration]="multipleAutoCompleteSearchConfiguration"> <app-multiple-auto-complete [id]="id" placeholder="{{ placeholder?.length > 0 ? placeholder : referenceType?.name}}" [formControl]="form" [configuration]="multipleAutoCompleteSearchConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
<mat-error *ngIf="form.hasError('backendError')">{{form.getError('backendError').message}}</mat-error> <mat-error *ngIf="form.hasError('backendError')">{{form.getError('backendError').message}}</mat-error>
<mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
@ -12,7 +12,7 @@
</mat-form-field> </mat-form-field>
<mat-form-field class="w-100" *ngIf="singleAutoCompleteSearchConfiguration"> <mat-form-field class="w-100" *ngIf="singleAutoCompleteSearchConfiguration">
<mat-label>{{label?.length > 0 ? label : referenceType?.name}}</mat-label> <mat-label>{{label?.length > 0 ? label : referenceType?.name}}</mat-label>
<app-single-auto-complete placeholder="{{ placeholder?.length > 0 ? placeholder : referenceType?.name}}" [formControl]="form" [configuration]="singleAutoCompleteSearchConfiguration"> <app-single-auto-complete [id]="id" placeholder="{{ placeholder?.length > 0 ? placeholder : referenceType?.name}}" [formControl]="form" [configuration]="singleAutoCompleteSearchConfiguration">
</app-single-auto-complete> </app-single-auto-complete>
<mat-error *ngIf="form.hasError('backendError')">{{form.getError('backendError').message}}</mat-error> <mat-error *ngIf="form.hasError('backendError')">{{form.getError('backendError').message}}</mat-error>
<mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>

View File

@ -20,7 +20,7 @@ import { FormService } from '@common/forms/form-service';
styleUrls: ['./reference-field.component.scss'] styleUrls: ['./reference-field.component.scss']
}) })
export class ReferenceFieldComponent extends BaseComponent implements OnInit, OnChanges { export class ReferenceFieldComponent extends BaseComponent implements OnInit, OnChanges {
static nextId = 0
@Input() referenceType: ReferenceType = null; @Input() referenceType: ReferenceType = null;
@Input() form: UntypedFormGroup = null; @Input() form: UntypedFormGroup = null;
@Input() label: string = null; @Input() label: string = null;
@ -29,6 +29,7 @@ export class ReferenceFieldComponent extends BaseComponent implements OnInit, On
@Input() hint: string; @Input() hint: string;
@Input() placeholder: string; @Input() placeholder: string;
@Input() dependencies: UntypedFormGroup = null; @Input() dependencies: UntypedFormGroup = null;
@Input() id: string = `multiple-autocomplete-${ReferenceFieldComponent.nextId++}`;
referenceToUse: Reference[]= []; referenceToUse: Reference[]= [];

View File

@ -12,7 +12,7 @@
.title { .title {
font-weight: 700; font-weight: 700;
font-size: 1.25rem; font-size: 1.25rem;
color: #212121; color: var(--dark-gray);
opacity: 1; opacity: 1;
} }

View File

@ -21,7 +21,7 @@
.user-profile-title { .user-profile-title {
font-size: 1.25rem; font-size: 1.25rem;
color: #212121; color: var(--dark-gray);
padding-top: 4.1875rem; padding-top: 4.1875rem;
padding-left: 3.75rem; padding-left: 3.75rem;
padding-bottom: 4.0625rem; padding-bottom: 4.0625rem;
@ -73,7 +73,7 @@
} }
.field-title { .field-title {
color: #212121; color: var(--dark-gray);
opacity: 0.81; opacity: 0.81;
font-size: 1.125rem; font-size: 1.125rem;
font-weight: 500; font-weight: 500;
@ -117,7 +117,7 @@
.mail-text { .mail-text {
line-height: 2; line-height: 2;
letter-spacing: 0.15px; letter-spacing: 0.15px;
color: #212121; color: var(--dark-gray);
} }
.check-icon { .check-icon {
@ -128,7 +128,7 @@
.clear-icon { .clear-icon {
cursor: pointer; cursor: pointer;
color: #212121; color: var(--dark-gray);
padding: 0.4rem; padding: 0.4rem;
} }
@ -182,7 +182,7 @@
span { span {
font-weight: 500; font-weight: 500;
letter-spacing: -0.35px; letter-spacing: -0.35px;
color: #212121; color: var(--dark-gray);
opacity: 1; opacity: 1;
} }
} }

View File

@ -2591,6 +2591,9 @@
"OPEN-FILTERS": "Open filters", "OPEN-FILTERS": "Open filters",
"OPEN-PLAN-OVERVIEW": "Open plan overview", "OPEN-PLAN-OVERVIEW": "Open plan overview",
"OPEN-DESCRIPTION-OVERVIEW": "Open description overview", "OPEN-DESCRIPTION-OVERVIEW": "Open description overview",
"MORE-ACTIONS": "More actions" "MORE-ACTIONS": "More actions",
"OPEN-MENU-FOR": "Open menu",
"CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card"
} }
} }

View File

@ -2591,6 +2591,9 @@
"OPEN-FILTERS": "Open filters", "OPEN-FILTERS": "Open filters",
"OPEN-PLAN-OVERVIEW": "Open plan overview", "OPEN-PLAN-OVERVIEW": "Open plan overview",
"OPEN-DESCRIPTION-OVERVIEW": "Open description overview", "OPEN-DESCRIPTION-OVERVIEW": "Open description overview",
"MORE-ACTIONS": "More actions" "MORE-ACTIONS": "More actions",
"OPEN-MENU-FOR": "Open menu",
"CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card"
} }
} }

View File

@ -2592,6 +2592,9 @@
"OPEN-FILTERS": "Open filters", "OPEN-FILTERS": "Open filters",
"OPEN-PLAN-OVERVIEW": "Open plan overview", "OPEN-PLAN-OVERVIEW": "Open plan overview",
"OPEN-DESCRIPTION-OVERVIEW": "Open description overview", "OPEN-DESCRIPTION-OVERVIEW": "Open description overview",
"MORE-ACTIONS": "More actions" "MORE-ACTIONS": "More actions",
"OPEN-MENU-FOR": "Open menu",
"CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card"
} }
} }

View File

@ -2591,6 +2591,9 @@
"OPEN-FILTERS": "Open filters", "OPEN-FILTERS": "Open filters",
"OPEN-PLAN-OVERVIEW": "Open plan overview", "OPEN-PLAN-OVERVIEW": "Open plan overview",
"OPEN-DESCRIPTION-OVERVIEW": "Open description overview", "OPEN-DESCRIPTION-OVERVIEW": "Open description overview",
"MORE-ACTIONS": "More actions" "MORE-ACTIONS": "More actions",
"OPEN-MENU-FOR": "Open menu",
"CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card"
} }
} }

View File

@ -2591,6 +2591,9 @@
"OPEN-FILTERS": "Open filters", "OPEN-FILTERS": "Open filters",
"OPEN-PLAN-OVERVIEW": "Open plan overview", "OPEN-PLAN-OVERVIEW": "Open plan overview",
"OPEN-DESCRIPTION-OVERVIEW": "Open description overview", "OPEN-DESCRIPTION-OVERVIEW": "Open description overview",
"MORE-ACTIONS": "More actions" "MORE-ACTIONS": "More actions",
"OPEN-MENU-FOR": "Open menu",
"CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card"
} }
} }

View File

@ -2591,6 +2591,9 @@
"OPEN-FILTERS": "Open filters", "OPEN-FILTERS": "Open filters",
"OPEN-PLAN-OVERVIEW": "Open plan overview", "OPEN-PLAN-OVERVIEW": "Open plan overview",
"OPEN-DESCRIPTION-OVERVIEW": "Open description overview", "OPEN-DESCRIPTION-OVERVIEW": "Open description overview",
"MORE-ACTIONS": "More actions" "MORE-ACTIONS": "More actions",
"OPEN-MENU-FOR": "Open menu",
"CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card"
} }
} }

View File

@ -2591,6 +2591,9 @@
"OPEN-FILTERS": "Open filters", "OPEN-FILTERS": "Open filters",
"OPEN-PLAN-OVERVIEW": "Open plan overview", "OPEN-PLAN-OVERVIEW": "Open plan overview",
"OPEN-DESCRIPTION-OVERVIEW": "Open description overview", "OPEN-DESCRIPTION-OVERVIEW": "Open description overview",
"MORE-ACTIONS": "More actions" "MORE-ACTIONS": "More actions",
"OPEN-MENU-FOR": "Open menu",
"CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card"
} }
} }

View File

@ -2591,6 +2591,9 @@
"OPEN-FILTERS": "Open filters", "OPEN-FILTERS": "Open filters",
"OPEN-PLAN-OVERVIEW": "Open plan overview", "OPEN-PLAN-OVERVIEW": "Open plan overview",
"OPEN-DESCRIPTION-OVERVIEW": "Open description overview", "OPEN-DESCRIPTION-OVERVIEW": "Open description overview",
"MORE-ACTIONS": "More actions" "MORE-ACTIONS": "More actions",
"OPEN-MENU-FOR": "Open menu",
"CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card"
} }
} }

View File

@ -2591,6 +2591,9 @@
"OPEN-FILTERS": "Open filters", "OPEN-FILTERS": "Open filters",
"OPEN-PLAN-OVERVIEW": "Open plan overview", "OPEN-PLAN-OVERVIEW": "Open plan overview",
"OPEN-DESCRIPTION-OVERVIEW": "Open description overview", "OPEN-DESCRIPTION-OVERVIEW": "Open description overview",
"MORE-ACTIONS": "More actions" "MORE-ACTIONS": "More actions",
"OPEN-MENU-FOR": "Open menu",
"CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card"
} }
} }

View File

@ -2591,6 +2591,9 @@
"OPEN-FILTERS": "Open filters", "OPEN-FILTERS": "Open filters",
"OPEN-PLAN-OVERVIEW": "Open plan overview", "OPEN-PLAN-OVERVIEW": "Open plan overview",
"OPEN-DESCRIPTION-OVERVIEW": "Open description overview", "OPEN-DESCRIPTION-OVERVIEW": "Open description overview",
"MORE-ACTIONS": "More actions" "MORE-ACTIONS": "More actions",
"OPEN-MENU-FOR": "Open menu",
"CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card"
} }
} }

View File

@ -2591,6 +2591,9 @@
"OPEN-FILTERS": "Open filters", "OPEN-FILTERS": "Open filters",
"OPEN-PLAN-OVERVIEW": "Open plan overview", "OPEN-PLAN-OVERVIEW": "Open plan overview",
"OPEN-DESCRIPTION-OVERVIEW": "Open description overview", "OPEN-DESCRIPTION-OVERVIEW": "Open description overview",
"MORE-ACTIONS": "More actions" "MORE-ACTIONS": "More actions",
"OPEN-MENU-FOR": "Open menu",
"CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card"
} }
} }

View File

@ -51,7 +51,7 @@
border-radius: 30px; border-radius: 30px;
min-width: 101px; min-width: 101px;
height: 43px; height: 43px;
color: #212121; color: var(--dark-gray);
font-weight: 500; font-weight: 500;
} }

View File

@ -11,8 +11,9 @@
--warning-color: #f44336; --warning-color: #f44336;
--primary-text: #ffffff; --primary-text: #ffffff;
--secondary-text: #000000; --secondary-text: #000000;
--gray-text: #757575; //previously #848484 --gray: #707070; //previously #848484
--light-gray: #aaaaaa --light-gray: #aaaaaa;
--dark-gray: #212121;
} }
// Define your theme with color palettes, typography and density // Define your theme with color palettes, typography and density