Merge pull request #2893 from gitbutlerapp/small-CSS-fixes-Profile-page

small CSS fixes: Profile page
This commit is contained in:
Pavel Laptev 2024-02-23 23:47:57 +01:00 committed by GitHub
commit 2a10996c47
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 28 additions and 17 deletions

View File

@ -16,6 +16,7 @@
.divider {
height: 1px;
width: 100%;
border-bottom: 1px solid var(--clr-theme-container-outline-light);
border-bottom: 1px solid var(--clr-theme-scale-ntrl-0);
opacity: 0.15;
}
</style>

View File

@ -78,14 +78,14 @@
position: relative;
width: 100%;
height: auto;
border-radius: var(--radius-l);
border-radius: var(--radius-m);
border: 1px solid var(--clr-theme-container-outline-light);
overflow: hidden;
& img {
width: 100%;
height: 100%;
object-fit: cover;
height: auto;
border-radius: var(--radius-m);
}
}
@ -114,7 +114,6 @@
.theme-card.selected .theme-card__preview {
border-color: var(--clr-core-pop-50);
border-width: 2px;
}
.theme-card.selected .theme-card__icon {

View File

@ -6,13 +6,15 @@
<section class="content-wrapper">
<ScrollableContainer>
<div class="content" data-tauri-drag-region>
{#if title}
<h1 class="title text-head-24">
{title}
</h1>
{/if}
<slot />
<div class="drag-region" data-tauri-drag-region>
<div class="content" data-tauri-drag-region>
{#if title}
<h1 class="title text-head-24">
{title}
</h1>
{/if}
<slot />
</div>
</div>
</ScrollableContainer>
</section>
@ -23,7 +25,12 @@
width: 100%;
height: 100%;
flex: 1;
background-color: var(--clr-theme-container-light);
background-color: var(--clr-theme-container-pale);
}
.drag-region {
width: 100%;
min-height: 100vh;
}
.content {

View File

@ -119,7 +119,7 @@
justify-content: space-between;
padding: calc(var(--space-40) + var(--space-4)) var(--space-20) var(--space-20) var(--space-20);
border-right: 1px solid var(--clr-theme-container-outline-light);
background-color: var(--clr-theme-container-pale);
background-color: var(--clr-theme-container-light);
height: 100%;
width: 16rem;
}
@ -172,7 +172,7 @@
transition: none;
background-color: color-mix(
in srgb,
var(--clr-theme-container-pale),
var(--clr-theme-container-light),
var(--darken-tint-light)
);
}
@ -183,7 +183,11 @@
}
.item_selected {
background-color: color-mix(in srgb, var(--clr-theme-container-pale), var(--darken-tint-light));
background-color: color-mix(
in srgb,
var(--clr-theme-container-light),
var(--darken-tint-light)
);
color: var(--clr-theme-scale-ntrl-0);
}
@ -209,7 +213,7 @@
padding: var(--space-16);
border-radius: var(--radius-m);
border: 1px solid var(--clr-theme-container-outline-light);
background-color: var(--clr-theme-container-pale);
background-color: var(--clr-theme-container-light);
color: var(--clr-theme-scale-ntrl-30);
transition: background-color var(--transition-fast);