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