Cleaning up the old theme. (#2720)

This commit is contained in:
Alexander Platov
2023-03-10 07:08:04 +07:00
committed by GitHub
parent 1d1ad2e8a1
commit 013c09ada2
158 changed files with 599 additions and 578 deletions
@@ -46,7 +46,7 @@
.icon-container {
width: 3.25rem;
height: 3.25rem;
color: var(--theme-content-trans-color);
color: var(--dark-color);
.normal-font &.noty {
clip-path: url(#notify-normal);
@@ -57,20 +57,20 @@
}
&:hover .icon-container {
color: var(--theme-caption-color);
color: var(--caption-color);
}
&:focus {
border: 1px solid var(--primary-button-focused-border);
box-shadow: 0 0 0 3px var(--primary-button-outline);
.icon-container {
color: var(--theme-caption-color);
color: var(--caption-color);
}
}
&.selected {
background-color: var(--theme-menu-selection);
background-color: var(--menu-bg-select);
.icon-container {
color: var(--theme-caption-color);
color: var(--caption-color);
}
}
}
@@ -74,12 +74,12 @@
}
.title {
color: var(--theme-caption-color);
color: var(--caption-color);
font-weight: 500;
}
.description {
margin-top: 0.25rem;
color: var(--theme-content-dark-color);
color: var(--dark-color);
}
</style>
@@ -20,29 +20,26 @@
</script>
<div class="itemsContainer">
<div class="flex-center">
{#each config as [_mode, label, params], i}
<div class="buttonWrapper">
<Button
{label}
labelParams={params}
size="small"
on:click={() => onChange(_mode)}
selected={_mode === mode}
shape={getButtonShape(i)}
/>
</div>
{/each}
</div>
{#each config as [_mode, label, params], i}
<div class="buttonWrapper">
<Button
{label}
labelParams={params}
size="small"
on:click={() => onChange(_mode)}
selected={_mode === mode}
shape={getButtonShape(i)}
/>
</div>
{/each}
</div>
<style lang="scss">
.itemsContainer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.65rem 1.35rem 0.65rem 2.25rem;
border-top: 1px solid var(--theme-button-border-hovered);
border-top: 1px solid var(--divider-color);
}
.buttonWrapper {
margin-right: 1px;
@@ -109,14 +109,8 @@
</div>
{/if}
<span class="overflow-label flex-no-shrink mr-3">{issueId}</span>
<span class="overflow-label w-full issue-title">{issue.title}</span>
<span class="overflow-label w-full content-color">{issue.title}</span>
</div>
{/if}
</svelte:fragment>
</ObjectPopup>
<style lang="scss">
.issue-title {
color: var(--theme-content-color);
}
</style>
@@ -1,6 +1,6 @@
<script lang="ts">
export let size: 'small' | 'medium' | 'large'
const fill: string = 'var(--theme-caption-color)'
const fill: string = 'var(--caption-color)'
</script>
<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
@@ -55,13 +55,13 @@
max-width: fit-content;
border: 1px solid var(--button-border-color);
border-radius: 0.25rem;
box-shadow: var(--primary-shadow);
box-shadow: var(--button-shadow);
}
.issue-title {
margin: 0 0.75rem 0 0.5rem;
padding-right: 0.75rem;
color: var(--theme-content-accent-color);
color: var(--accent-color);
border-right: 1px solid var(--button-border-color);
}
@@ -72,10 +72,10 @@
transition: color 0.15s;
&:hover {
color: var(--theme-caption-color);
color: var(--caption-color);
}
&:active {
color: var(--theme-content-accent-color);
color: var(--accent-color);
}
&::before {
position: absolute;
@@ -259,9 +259,9 @@
<style lang="scss">
.root {
padding: 0.5rem 1.5rem;
background-color: var(--theme-bg-accent-color);
border: 1px solid var(--theme-button-border-enabled);
padding: 0.75rem;
background-color: var(--accent-bg-color);
border: 1px solid var(--button-border-color);
border-radius: 0.5rem;
overflow: hidden;
@@ -320,7 +320,7 @@
.title {
font-weight: 500;
font-size: 1.125rem;
color: var(--theme-caption-color);
color: var(--caption-color);
}
.content {
@@ -328,11 +328,11 @@
}
.description-preview {
color: var(--theme-content-color);
color: var(--content-color);
line-height: 150%;
.placeholder {
color: var(--theme-content-trans-color);
color: var(--dark-color);
}
}
.divider {
@@ -190,32 +190,28 @@
padding: $padding;
.issue-title {
color: var(--theme-content-accent-color);
color: var(--accent-color);
transition: color 0.15s;
}
&:hover {
.issue-title {
color: var(--theme-caption-color);
&:hover {
color: var(--caption-color);
}
}
&:active {
.issue-title {
color: var(--theme-content-accent-color);
&:active {
color: var(--accent-color);
}
}
}
.sub-issues {
padding: $padding;
color: var(--theme-content-color);
color: var(--content-color);
transition: color 0.15s;
&:hover {
color: var(--theme-caption-color);
color: var(--caption-color);
}
&:active {
color: var(--theme-content-accent-color);
color: var(--accent-color);
}
}
</style>
@@ -184,11 +184,12 @@
.listGrid {
width: 100%;
height: 3.25rem;
color: var(--theme-caption-color);
border-bottom: 1px solid var(--theme-button-border-hovered);
color: var(--caption-color);
border-bottom: 1px solid var(--divider-color);
&.mListGridChecked {
background-color: var(--theme-table-bg-hover);
background-color: var(--highlight-select);
border-bottom-color: var(--highlight-select-border);
.eListGridCheckBox {
opacity: 1;
@@ -196,7 +197,10 @@
}
&.mListGridSelected {
background-color: var(--menu-bg-select);
background-color: var(--highlight-hover);
}
&.mListGridChecked.mListGridSelected {
background-color: var(--highlight-select-hover);
}
.eListGridCheckBox {
@@ -36,7 +36,7 @@
min-width: 0;
font-weight: 500;
text-align: left;
color: var(--theme-caption-color);
color: var(--caption-color);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@@ -35,7 +35,7 @@
min-width: 0;
font-weight: 500;
text-align: left;
color: var(--theme-caption-color);
color: var(--caption-color);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@@ -195,8 +195,10 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.65rem 1.35rem 0.65rem 2.25rem;
border-bottom: 1px solid var(--theme-button-border-hovered);
padding: 0.65rem 0.75rem 0.65rem 2.25rem;
background-color: var(--board-bg-color);
border-top: 1px solid var(--divider-color);
border-bottom: 1px solid var(--divider-color);
}
.buttonWrapper {
@@ -243,22 +243,22 @@
&.is-dragging::before {
position: absolute;
content: '';
background-color: var(--theme-bg-color);
opacity: 0.4;
background-color: var(--divider-color);
inset: 0;
z-index: -1;
}
&.is-dragged-over-up::before {
position: absolute;
content: '';
inset: 0;
border-top: 1px solid var(--theme-bg-check);
border-top: 1px solid var(--caret-color);
}
&.is-dragged-over-down::before {
position: absolute;
content: '';
inset: 0;
border-bottom: 1px solid var(--theme-bg-check);
border-bottom: 1px solid var(--caret-color);
}
}
</style>
@@ -306,7 +306,7 @@
.title {
font-weight: 500;
font-size: 1.125rem;
color: var(--theme-caption-color);
color: var(--caption-color);
}
.content {
@@ -314,11 +314,11 @@
}
.description-preview {
color: var(--theme-content-color);
color: var(--content-color);
line-height: 150%;
.placeholder {
color: var(--theme-content-trans-color);
color: var(--dark-color);
}
}
.divider {
@@ -225,22 +225,22 @@
&.is-dragging::before {
position: absolute;
content: '';
background-color: var(--theme-bg-color);
opacity: 0.4;
background-color: var(--divider-color);
inset: 0;
z-index: -1;
}
&.is-dragged-over-up::before {
position: absolute;
content: '';
inset: 0;
border-top: 1px solid var(--theme-bg-check);
border-top: 1px solid var(--caret-color);
}
&.is-dragged-over-down::before {
position: absolute;
content: '';
inset: 0;
border-bottom: 1px solid var(--theme-bg-check);
border-bottom: 1px solid var(--caret-color);
}
}
</style>
@@ -30,7 +30,12 @@
const dispatch = createEventDispatcher()
function pickColor (evt: MouseEvent) {
showPopup(ColorsPopup, {}, eventToHTMLElement(evt), (newColor) => (value.color = newColor))
showPopup(
ColorsPopup,
{ selected: value.color ? getPlatformColor(value.color) : undefined },
eventToHTMLElement(evt),
(newColor) => (value.color = newColor)
)
}
$: canSave = !isSaving && (value.name ?? '').length > 0
@@ -321,14 +321,14 @@
position: absolute;
content: '';
inset: 0;
border-top: 1px solid var(--theme-bg-check);
border-top: 1px solid var(--caret-color);
}
&.is-dragged-over-down::before {
position: absolute;
content: '';
inset: 0;
border-bottom: 1px solid var(--theme-bg-check);
border-bottom: 1px solid var(--caret-color);
}
}