use text color css vars in remaining components
This commit is contained in:
parent
662c60a51c
commit
5eefcc0bc7
11 changed files with 26 additions and 26 deletions
|
|
@ -522,7 +522,7 @@
|
||||||
|
|
||||||
.database-back-button {
|
.database-back-button {
|
||||||
border-radius: layout.$full-corner;
|
border-radius: layout.$full-corner;
|
||||||
color: colors.$grey-50;
|
color: var(--text-secondary);
|
||||||
font-size: typography.$font-small;
|
font-size: typography.$font-small;
|
||||||
font-weight: typography.$medium;
|
font-weight: typography.$medium;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
|
||||||
|
|
@ -132,7 +132,7 @@
|
||||||
}
|
}
|
||||||
&.grade-none {
|
&.grade-none {
|
||||||
background: colors.$grey-85;
|
background: colors.$grey-85;
|
||||||
color: colors.$grey-50;
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -159,7 +159,7 @@
|
||||||
|
|
||||||
.breakdown-label {
|
.breakdown-label {
|
||||||
font-size: typography.$font-small;
|
font-size: typography.$font-small;
|
||||||
color: colors.$grey-50;
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.breakdown-value {
|
.breakdown-value {
|
||||||
|
|
@ -211,7 +211,7 @@
|
||||||
|
|
||||||
.no-grade-text {
|
.no-grade-text {
|
||||||
font-size: typography.$font-small;
|
font-size: typography.$font-small;
|
||||||
color: colors.$grey-50;
|
color: var(--text-secondary);
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -75,7 +75,7 @@
|
||||||
.empty-state {
|
.empty-state {
|
||||||
padding: spacing.$unit-4x;
|
padding: spacing.$unit-4x;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: colors.$grey-50;
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.skill-options {
|
.skill-options {
|
||||||
|
|
|
||||||
|
|
@ -191,6 +191,6 @@
|
||||||
|
|
||||||
.control-label {
|
.control-label {
|
||||||
font-size: typography.$font-small;
|
font-size: typography.$font-small;
|
||||||
color: colors.$grey-50;
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -62,16 +62,12 @@
|
||||||
{#if job}
|
{#if job}
|
||||||
<img class="job-portrait" src={jobImageUrl} alt={job.name.en} />
|
<img class="job-portrait" src={jobImageUrl} alt={job.name.en} />
|
||||||
<div class="overlay"></div>
|
<div class="overlay"></div>
|
||||||
{:else}
|
{:else if canEdit}
|
||||||
<div class="empty-portrait">
|
<div class="empty-portrait">
|
||||||
{#if canEdit}
|
<button class="select-job-button" on:click={onSelectJob}>
|
||||||
<button class="select-job-button" on:click={onSelectJob}>
|
<Icon name="plus" size={24} />
|
||||||
<Icon name="plus" size={24} />
|
<span>Select Job</span>
|
||||||
<span>Select Job</span>
|
</button>
|
||||||
</button>
|
|
||||||
{:else}
|
|
||||||
<span>No Job Selected</span>
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
|
@ -170,8 +166,8 @@
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{:else}
|
{:else}
|
||||||
<div class="no-job-message">
|
<div class="no-job-message" class:readonly={!canEdit}>
|
||||||
<p>Select a job to view skills and details</p>
|
<p>{canEdit ? 'Select a job to view skills and details' : 'No job selected'}</p>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -434,6 +430,10 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
color: var(--text-tertiary);
|
color: var(--text-tertiary);
|
||||||
font-size: typography.$font-regular;
|
font-size: typography.$font-regular;
|
||||||
|
|
||||||
|
&.readonly {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -444,7 +444,7 @@
|
||||||
.empty {
|
.empty {
|
||||||
padding: spacing.$unit-2x;
|
padding: spacing.$unit-2x;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: colors.$grey-50;
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
|
|
|
||||||
|
|
@ -175,7 +175,7 @@
|
||||||
|
|
||||||
.special-note {
|
.special-note {
|
||||||
font-size: typography.$font-small;
|
font-size: typography.$font-small;
|
||||||
color: colors.$grey-50;
|
color: var(--text-secondary);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding-bottom: spacing.$unit;
|
padding-bottom: spacing.$unit;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -137,12 +137,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-data {
|
.no-data {
|
||||||
color: colors.$grey-50;
|
color: var(--text-secondary);
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loading {
|
.loading {
|
||||||
color: colors.$grey-50;
|
color: var(--text-secondary);
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -89,7 +89,7 @@
|
||||||
|
|
||||||
.boolean-indicator {
|
.boolean-indicator {
|
||||||
font-size: typography.$font-regular;
|
font-size: typography.$font-regular;
|
||||||
color: colors.$grey-50;
|
color: var(--text-secondary);
|
||||||
|
|
||||||
&.yes {
|
&.yes {
|
||||||
color: colors.$wind-bg-00;
|
color: colors.$wind-bg-00;
|
||||||
|
|
|
||||||
|
|
@ -157,7 +157,7 @@
|
||||||
|
|
||||||
.image-sublabel {
|
.image-sublabel {
|
||||||
font-size: typography.$font-tiny;
|
font-size: typography.$font-tiny;
|
||||||
color: colors.$grey-60;
|
color: var(--text-tertiary);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -356,7 +356,7 @@
|
||||||
.empty {
|
.empty {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: spacing.$unit * 4;
|
padding: spacing.$unit * 4;
|
||||||
color: colors.$grey-50;
|
color: var(--text-secondary);
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin: 0 0 spacing.$unit-2x 0;
|
margin: 0 0 spacing.$unit-2x 0;
|
||||||
|
|
@ -374,7 +374,7 @@
|
||||||
.group-title {
|
.group-title {
|
||||||
font-size: typography.$font-small;
|
font-size: typography.$font-small;
|
||||||
font-weight: typography.$medium;
|
font-weight: typography.$medium;
|
||||||
color: colors.$grey-50;
|
color: var(--text-secondary);
|
||||||
margin: 0 0 spacing.$unit 0;
|
margin: 0 0 spacing.$unit 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -420,7 +420,7 @@
|
||||||
|
|
||||||
.skill-name-jp {
|
.skill-name-jp {
|
||||||
font-size: typography.$font-small;
|
font-size: typography.$font-small;
|
||||||
color: colors.$grey-50;
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.skill-category {
|
.skill-category {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue