gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-09-11 12:25:42 +03:00
Code Issues Packages Projects Releases Wiki Activity

Replace px with rem (#3998)

Browse Source 
* add the plugin

* replace size variables with px

* formatting

* remove px + px from calc functions

* replaced rem with px

* update rem calculation in functions

* Update Button.svelte

* replace string with number values

* scrollbar appearance bug

* formatting fix
This commit is contained in:
Pavel Laptev 2024-06-05 02:32:49 +02:00 committed by GitHub
parent 961edf52c4
commit 1451534b51
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
126 changed files with 706 additions and 705 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/package.json
View File

@ -75,6 +75,7 @@
"nanoid": "^5.0.7",
"postcss": "^8.4.38",
"postcss-load-config": "^5.1.0",
"postcss-pxtorem": "^6.1.0",
"posthog-js": "1.136.4",
"prettier": "^3.3.0",
"prettier-plugin-svelte": "^3.2.3",

12
app/postcss.config.cjs
View File

@ -1,9 +1,19 @@
const autoprefixer = require('autoprefixer');
const pxToRem = require('postcss-pxtorem');
const config = {
plugins: [
//But others, like autoprefixer, need to run after,
autoprefixer
autoprefixer,
pxToRem({
rootValue: 16,
unitPrecision: 5,
propList: ['*'],
selectorBlackList: [],
replace: true,
mediaQuery: false,
minPixelValue: 0
})
]
};

4
app/src/lib/components/AIPromptEdit/AIPromptEdit.svelte
View File

@ -68,12 +68,12 @@
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--size-24);
gap: 24px;
}
.content {
display: flex;
flex-direction: column;
gap: var(--size-6);
gap: 6px;
}
</style>

14
app/src/lib/components/AIPromptEdit/Content.svelte
View File

@ -171,8 +171,8 @@
cursor: pointer;
display: flex;
align-items: center;
gap: var(--size-16);
padding: var(--size-16);
gap: 16px;
padding: 16px;
&.editing {
cursor: default;
@ -194,9 +194,9 @@
.content {
display: flex;
flex-direction: column;
gap: var(--size-16);
gap: 16px;
padding: var(--size-16) 0;
padding: 16px 0;
border-top: 1px solid var(--clr-border-3);
}
@ -212,12 +212,12 @@
.actions {
display: flex;
justify-content: flex-end;
gap: var(--size-8);
padding: 0 var(--size-16) var(--size-16);
gap: 8px;
padding: 0 16px 16px;
}
.default-mode {
padding: var(--size-16) 0;
padding: 16px 0;
border-top: 1px solid var(--clr-border-3);
& .sections-divider {

16
app/src/lib/components/AIPromptEdit/DialogBubble.svelte
View File

@ -105,7 +105,7 @@
flex-direction: column;
width: 100%;
padding: 0 var(--size-16);
padding: 0 16px;
&.editing {
& .bubble__header {
@ -142,8 +142,8 @@
.bubble__header {
display: flex;
align-items: center;
gap: var(--size-8);
padding: var(--size-12);
gap: 8px;
padding: 12px;
/* border: 1px solid var(--clr-border-2); */
border-bottom: none;
@ -157,15 +157,15 @@
/* border: 1px solid var(--clr-border-2); */
border-radius: 0 0 var(--radius-l) var(--radius-l);
padding: var(--size-12);
padding: 12px;
}
.bubble-actions {
display: flex;
width: 90%;
margin-top: var(--size-12);
margin-bottom: var(--size-8);
gap: var(--size-8);
margin-top: 12px;
margin-bottom: 8px;
gap: 8px;
}
.textarea {
@ -174,7 +174,7 @@
background: none;
border: none;
outline: none;
padding: var(--size-12);
padding: 12px;
background-color: var(--clr-bg-1);
border: 1px solid var(--clr-border-2);
border-radius: 0 0 var(--radius-l) var(--radius-l);

16
app/src/lib/components/AccountLink.svelte
View File

@ -39,10 +39,10 @@
display: flex;
align-items: center;
overflow-x: hidden;
gap: var(--size-8);
gap: 8px;
height: var(--size-cta);
padding: var(--size-6) var(--size-8);
padding: 6px 8px;
border-radius: var(--radius-m);
color: var(--clr-scale-ntrl-50);
@ -76,14 +76,14 @@
.anon-icon,
.profile-picture {
border-radius: var(--radius-m);
width: var(--size-20);
height: var(--size-20);
width: 20px;
height: 20px;
}
.anon-icon {
display: flex;
align-items: center;
justify-content: center;
padding: var(--size-2);
padding: 2px;
background: var(--clr-theme-pop-element);
color: var(--clr-theme-pop-on-element);
}
@ -91,13 +91,13 @@
/* MODIFIERS */
.btn.collapsed {
overflow-x: initial;
padding: var(--size-8);
padding: 8px;
height: auto;
& .anon-icon,
.profile-picture {
width: var(--size-24);
height: var(--size-24);
width: 24px;
height: 24px;
}
}
</style>

2
app/src/lib/components/AnalyticsConfirmation.svelte
View File

@ -31,7 +31,7 @@
width: 100%;
display: flex;
flex-direction: column;
gap: var(--size-12);
gap: 12px;
}
.title {

6
app/src/lib/components/AnalyticsSettings.svelte
View File

@ -92,13 +92,13 @@
.analytics-settings {
display: flex;
flex-direction: column;
gap: var(--size-28);
gap: 28px;
}
.analytics-settings__content {
display: flex;
flex-direction: column;
gap: var(--size-16);
gap: 16px;
}
.analytics-settings__text {
@ -108,6 +108,6 @@
.analytics-settings__actions {
display: flex;
flex-direction: column;
gap: var(--size-8);
gap: 8px;
}
</style>

16
app/src/lib/components/AppUpdater.svelte
View File

@ -155,16 +155,16 @@
display: flex;
flex-direction: column;
align-items: center;
gap: var(--size-16);
gap: 16px;
width: 100%;
max-width: 220px;
position: fixed;
z-index: var(--z-blocker);
bottom: var(--size-12);
left: var(--size-12);
padding: var(--size-24);
bottom: 12px;
left: 12px;
padding: 24px;
background-color: var(--clr-bg-1);
border: 1px solid var(--clr-border-2);
border-radius: var(--radius-m);
@ -178,7 +178,7 @@
width: 100%;
display: flex;
flex-direction: column;
gap: var(--size-8);
gap: 8px;
}
/* STATUS SECTION */
@ -239,7 +239,7 @@
.busy {
& .status-section {
height: var(--size-4);
height: 4px;
}
& .sliding-gradient {
@ -305,8 +305,8 @@
.floating-button {
position: absolute;
right: var(--size-10);
top: var(--size-10);
right: 10px;
top: 10px;
}
@keyframes moving-arrow {

6
app/src/lib/components/AuthorIcon.svelte
View File

@ -16,10 +16,10 @@
<style lang="postcss">
.gravatar-image {
width: var(--size-16);
height: var(--size-16);
width: 16px;
height: 16px;
border-radius: 50%;
margin-left: calc(var(--size-4) * -1);
margin-left: -4px;
&:first-child {
margin-left: 0;

8
app/src/lib/components/AuthorIcons.svelte
View File

@ -31,11 +31,11 @@
display: flex;
align-items: center;
justify-content: center;
height: var(--size-16);
padding: 0 var(--size-4);
height: 16px;
padding: 0 4px;
background-color: var(--clr-bg-1);
border-radius: var(--size-16);
margin-left: calc(var(--size-4) * -1);
border-radius: 16px;
margin-left: -4px;
border: 1px solid var(--clr-border-2);
& span {

34
app/src/lib/components/Avatar.svelte
View File

@ -43,53 +43,53 @@
<style lang="postcss">
.avatar {
position: absolute;
width: var(--size-16);
min-width: var(--size-16);
height: var(--size-16);
width: 16px;
min-width: 16px;
height: 16px;
border-radius: var(--radius-l);
top: var(--avatar-top);
left: calc(-1 * (var(--size-2) + 0.063rem));
left: -3px;
&.remote-lane {
left: var(--size-4);
left: 4px;
}
&.remote {
border: var(--size-2) solid var(--clr-commit-remote);
left: var(--size-4);
border: 2px solid var(--clr-commit-remote);
left: 4px;
}
&.local {
border: var(--size-2) solid var(--clr-commit-local);
border: 2px solid var(--clr-commit-local);
}
&.upstream {
border: var(--size-2) solid var(--clr-commit-upstream);
border: 2px solid var(--clr-commit-upstream);
}
&.integrated {
border: var(--size-2) solid var(--clr-commit-shadow);
border: 2px solid var(--clr-commit-shadow);
}
&.first {
top: var(--avatar-first-top);
}
&.shadow-lane {
left: calc(var(--size-4) + 0.063rem);
left: 5px;
}
}
.shadow-marker {
position: absolute;
width: var(--size-10);
height: var(--size-10);
width: 10px;
height: 10px;
border-radius: 100%;
top: calc(var(--avatar-top) + var(--size-4));
left: calc(var(--size-6) + 0.063rem);
top: calc(var(--avatar-top) + 4px);
left: 7px;
background-color: var(--clr-commit-remote);
&.integrated {
background-color: var(--clr-commit-shadow);
}
&.first {
top: calc(var(--avatar-first-top) + var(--size-2) + 0.063rem);
top: calc(var(--avatar-first-top) + 3px);
}
&.shadow-lane {
left: var(--size-8);
left: 8px;
background-color: var(--clr-commit-shadow);
}
&.upstream {

8
app/src/lib/components/Badge.svelte
View File

@ -15,10 +15,10 @@
align-items: center;
justify-content: center;
text-align: center;
height: var(--size-14);
min-width: var(--size-14);
border-radius: var(--size-14);
padding: 0 var(--size-4);
height: 14px;
min-width: 14px;
border-radius: 14px;
padding: 0 4px;
color: var(--clr-scale-ntrl-100);
background-color: var(--clr-scale-ntrl-40);
line-height: 90%;

12
app/src/lib/components/BaseBranch.svelte
View File

@ -135,7 +135,7 @@
.wrapper {
display: flex;
flex-direction: column;
gap: var(--size-16);
gap: 16px;
}
.info-text {
@ -145,8 +145,8 @@
.modal-content {
display: flex;
flex-direction: column;
gap: var(--size-10);
margin-bottom: var(--size-20);
gap: 10px;
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
@ -160,10 +160,10 @@
.modal__dont-show-again {
display: flex;
align-items: center;
gap: var(--size-8);
padding: var(--size-14);
gap: 8px;
padding: 14px;
background-color: var(--clr-bg-2);
border-radius: var(--radius-m);
margin-bottom: var(--size-6);
margin-bottom: 6px;
}
</style>

18
app/src/lib/components/BaseBranchCard.svelte
View File

@ -74,8 +74,8 @@
.base-branch-card {
position: relative;
display: flex;
gap: var(--size-10);
padding: var(--size-10);
gap: 10px;
padding: 10px;
border-radius: var(--radius-m);
transition: background-color var(--transition-fast);
}
@ -88,14 +88,14 @@
.icon {
border-radius: var(--radius-s);
height: var(--size-20);
width: var(--size-20);
height: 20px;
width: 20px;
flex-shrink: 0;
}
.content {
display: flex;
flex-direction: column;
gap: var(--size-8);
gap: 8px;
overflow: hidden;
}
.trunk-label {
@ -103,14 +103,14 @@
}
.button-head {
display: flex;
gap: var(--size-6);
gap: 6px;
align-items: center;
color: var(--clr-scale-ntrl-10);
}
.base-branch-label {
display: flex;
align-items: center;
gap: var(--size-4);
gap: 4px;
color: var(--clr-scale-ntrl-40);
overflow: hidden;
@ -128,8 +128,8 @@
display: flex;
align-items: center;
justify-content: center;
padding: var(--size-2);
min-width: var(--size-14);
padding: 2px;
min-width: 14px;
background-color: var(--clr-theme-err-element);
color: var(--clr-scale-ntrl-100);
border-radius: var(--radius-m);

38
app/src/lib/components/Board.svelte
View File

@ -237,7 +237,7 @@
align-items: center;
height: 100%;
width: 100%;
padding: 0 var(--size-40);
padding: 0 40px;
}
.empty-board {
@ -246,10 +246,10 @@
border: 1px solid var(--clr-border-2);
border-radius: var(--radius-l);
width: 100%;
gap: var(--size-48);
max-width: 46rem;
min-height: 20rem;
padding: var(--size-32);
gap: 48px;
max-width: 736px;
min-height: 320px;
padding: 32px;
}
.empty-board__content {
@ -257,13 +257,13 @@
display: flex;
flex-direction: column;
overflow: hidden;
padding-left: var(--size-4);
padding-left: 4px;
}
.empty-board__image-frame {
flex-shrink: 0;
position: relative;
width: 11.2rem;
width: 180px;
height: auto;
border-radius: var(--radius-l);
background-color: var(--clr-illustration-bg);
@ -274,8 +274,8 @@
position: absolute;
bottom: 12%;
left: 50%;
width: 6.5rem;
height: 1.5rem;
width: 104px;
height: 24px;
transform: translateX(-50%) scale(1.15);
border-radius: 100%;
background-color: var(--clr-illustration-outline);
@ -290,7 +290,7 @@
top: 50%;
left: 50%;
transform: translate(-50%, -70%) translateZ(0);
width: 13.3rem;
width: 212px;
animation: hovering 5.5s infinite ease-in-out;
animation-delay: 3s;
}
@ -325,7 +325,7 @@
.empty-board__about {
display: flex;
flex-direction: column;
margin-bottom: var(--size-32);
margin-bottom: 32px;
}
.empty-board__about h3 {
@ -339,14 +339,14 @@
.empty-board__suggestions {
display: flex;
flex-direction: row;
gap: var(--size-40);
gap: 40px;
}
.empty-board__suggestions__block {
display: flex;
flex-direction: column;
gap: var(--size-16);
min-width: 8rem;
gap: 16px;
min-width: 128px;
}
.empty-board__suggestions__block h3 {
@ -356,8 +356,8 @@
.empty-board__suggestions__links {
display: flex;
flex-direction: column;
gap: var(--size-6);
margin-left: calc(var(--size-4) * -1);
gap: 6px;
margin-left: -4px;
}
.empty-board__suggestions__link {
@ -365,9 +365,9 @@
display: flex;
width: fit-content;
max-width: 100%;
padding: var(--size-2) var(--size-6) var(--size-2) var(--size-4);
padding: 2px 6px 2px 4px;
border-radius: var(--radius-s);
gap: var(--size-10);
gap: 10px;
transition: background-color var(--transition-fast);
overflow: hidden;
@ -377,7 +377,7 @@
& span {
color: var(--clr-scale-ntrl-40);
margin-top: calc(var(--size-6) / 2);
margin-top: 3px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

10
app/src/lib/components/BranchCard.svelte
View File

@ -178,8 +178,8 @@
<ScrollableContainer
wide
padding={{
top: `var(--size-12)`,
bottom: `var(--size-12)`
top: 12,
bottom: 12
}}
bottomBuffer={300}
on:bottomReached={onBottomReached}
@ -350,7 +350,7 @@
flex-direction: column;
flex: 1;
min-height: 100%;
padding: var(--size-12);
padding: 12px;
}
.card {
@ -367,7 +367,7 @@
.card-notifications {
display: flex;
flex-direction: column;
padding: 0 var(--size-12) var(--size-12) var(--size-12);
padding: 0 12px 12px 12px;
}
.new-branch,
@ -407,7 +407,7 @@
.collapsed-lane-container {
display: flex;
flex-direction: column;
padding: var(--size-12);
padding: 12px;
height: 100%;
border-right: 1px solid var(--clr-border-2);
}

2
app/src/lib/components/BranchFiles.svelte
View File

@ -53,6 +53,6 @@
.branch-files {
flex: 1;
background: var(--clr-bg-1);
/* padding: 0 var(--size-14) var(--size-14); */
/* padding: 0 14px 14px; */
}
</style>

6
app/src/lib/components/BranchFilesHeader.svelte
View File

@ -70,16 +70,16 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--size-14);
padding: 14px;
}
.header__title {
display: flex;
align-items: center;
gap: var(--size-4);
gap: 4px;
color: var(--clr-scale-ntrl-0);
}
.header__left {
display: flex;
gap: var(--size-10);
gap: 10px;
}
</style>

6
app/src/lib/components/BranchFilesList.svelte
View File

@ -88,16 +88,16 @@
<style lang="postcss">
.merge-commit-error {
padding: var(--size-14);
padding: 14px;
& .info {
margin-bottom: var(--size-8);
margin-bottom: 8px;
color: var(--clr-text-2);
}
& .command {
display: flex;
gap: var(--size-8);
gap: 8px;
align-items: center;
width: 100%;
}

5
app/src/lib/components/BranchFooter.svelte
View File

@ -73,7 +73,7 @@
<style lang="postcss">
.actions {
background: var(--clr-bg-1);
padding: var(--size-16);
padding: 16px;
}
/* EMPTY STATE */
@ -82,7 +82,7 @@
display: flex;
/* justify-content: space-between; */
align-items: center;
gap: var(--size-20);
gap: 20px;
}
.empty-state__image {
@ -92,6 +92,5 @@
.empty-state__text {
color: var(--clr-text-3);
flex: 1;
/* max-width: 8rem; */
}
</style>

60
app/src/lib/components/BranchHeader.svelte
View File

@ -299,22 +299,22 @@
.header__wrapper {
z-index: var(--z-lifted);
position: sticky;
top: var(--size-12);
padding-bottom: var(--size-8);
top: 12px;
padding-bottom: 8px;
}
.header {
z-index: var(--z-lifted);
position: relative;
flex-direction: column;
gap: var(--size-2);
gap: 2px;
transition:
border-color 0.12s ease-in-out,
box-shadow 0.12s ease-in-out;
}
.header_target-branch {
border-color: var(--clr-theme-pop-element);
box-shadow: 0 var(--size-4) 0 var(--clr-theme-pop-element);
margin-bottom: var(--size-4);
box-shadow: 0 4px 0 var(--clr-theme-pop-element);
margin-bottom: 4px;
}
.header_target-branch-animation {
animation: setTargetAnimation 0.25s ease-in-out forwards;
@ -327,45 +327,45 @@
}
50% {
border-color: var(--clr-theme-pop-element);
box-shadow: 0 var(--size-4) 0 var(--clr-theme-pop-element);
margin-bottom: var(--size-4);
box-shadow: 0 4px 0 var(--clr-theme-pop-element);
margin-bottom: 4px;
}
70%,
100% {
transform: scale(1);
border-color: var(--clr-theme-pop-element);
box-shadow: 0 var(--size-4) 0 var(--clr-theme-pop-element);
margin-bottom: var(--size-4);
box-shadow: 0 4px 0 var(--clr-theme-pop-element);
margin-bottom: 4px;
}
}
.header__top-overlay {
z-index: var(--z-ground);
position: absolute;
top: calc(var(--size-16) * -1);
top: -16px;
left: 0;
width: 100%;
height: var(--size-20);
height: 20px;
background: var(--clr-bg-2);
}
.header__info-wrapper {
display: flex;
gap: var(--size-2);
padding: var(--size-10);
gap: 2px;
padding: 10px;
}
.header__info {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
gap: var(--size-10);
gap: 10px;
}
.header__actions {
display: flex;
gap: var(--size-4);
gap: 4px;
background: var(--clr-bg-1);
border-top: 1px solid var(--clr-border-2);
padding: var(--size-14);
padding: 14px;
justify-content: space-between;
border-radius: 0 0 var(--radius-m) var(--radius-m);
user-select: none;
@ -374,13 +374,13 @@
.header__buttons {
display: flex;
position: relative;
gap: var(--size-4);
gap: 4px;
}
.draggable {
display: flex;
height: fit-content;
cursor: grab;
padding: var(--size-2) var(--size-2) 0 0;
padding: 2px 2px 0 0;
color: var(--clr-scale-ntrl-50);
transition: color var(--transition-slow);
@ -391,17 +391,17 @@
.branch-popup-menu {
position: absolute;
top: calc(100% + var(--size-4));
top: calc(100% + 4px);
right: 0;
z-index: var(--z-floating);
}
.header__remote-branch {
color: var(--clr-scale-ntrl-50);
padding-left: var(--size-2);
padding-right: var(--size-2);
padding-left: 2px;
padding-right: 2px;
display: flex;
gap: var(--size-4);
gap: 4px;
text-overflow: ellipsis;
overflow-x: hidden;
white-space: nowrap;
@ -415,10 +415,10 @@
user-select: none;
align-items: center;
height: 100%;
width: var(--size-48);
width: 48px;
overflow: hidden;
gap: var(--size-8);
padding: var(--size-8) var(--size-8) var(--size-20);
gap: 8px;
padding: 8px 8px 20px;
&:focus-within {
outline: none;
@ -433,13 +433,13 @@
display: flex;
flex-direction: column;
align-items: center;
gap: var(--size-2);
gap: 2px;
}
.collapsed-lane__draggable {
cursor: grab;
transform: rotate(90deg);
margin-bottom: var(--size-4);
margin-bottom: 4px;
opacity: 0.4;
transition: opacity var(--transition-fast);
color: var(--clr-scale-ntrl-0);
@ -459,7 +459,7 @@
.collapsed-lane__info {
display: flex;
justify-content: space-between;
gap: var(--size-8);
gap: 8px;
transform: rotate(-90deg);
direction: ltr;
}
@ -470,14 +470,14 @@
display: flex;
flex-direction: row-reverse;
align-items: center;
gap: var(--size-4);
gap: 4px;
}
.collapsed-lane__label-wrap {
overflow: hidden;
display: flex;
align-items: center;
gap: var(--size-12);
gap: 12px;
}
.collapsed-lane__label {

8
app/src/lib/components/BranchIcon.svelte
View File

@ -63,12 +63,12 @@
<style lang="postcss">
.branch-icon {
flex-shrink: 0;
width: 1rem;
height: 1rem;
width: 16px;
height: 16px;
border-radius: var(--radius-s);
& svg {
width: 1rem;
height: 1rem;
width: 16px;
height: 16px;
}
& path {
fill: var(--clr-bg-1);

8
app/src/lib/components/BranchItem.svelte
View File

@ -53,10 +53,10 @@
<style lang="postcss">
.branch {
display: flex;
gap: var(--size-10);
gap: 10px;
width: 100%;
padding: var(--size-10) var(--size-8);
padding: 10px 8px;
border-radius: var(--radius-m);
transition: background-color var(--transition-fast);
}
@ -65,14 +65,14 @@
display: flex;
flex-grow: 1;
flex-direction: column;
gap: var(--size-6);
gap: 6px;
overflow: hidden;
}
.branch__details {
display: flex;
align-items: center;
gap: var(--size-6);
gap: 6px;
justify-content: space-between;
}

6
app/src/lib/components/BranchLabel.svelte
View File

@ -55,9 +55,9 @@
<style lang="postcss">
.branch-name-mesure-el,
.branch-name-input {
min-width: 2.8rem;
height: var(--size-20);
padding: var(--size-2) var(--size-4);
min-width: 44px;
height: 20px;
padding: 2px 4px;
border: 1px solid transparent;
}
.branch-name-mesure-el {

2
app/src/lib/components/BranchLane.svelte
View File

@ -127,6 +127,6 @@
overflow: hidden;
align-items: self-start;
padding: var(--size-12) var(--size-12) var(--size-12) 0;
padding: 12px 12px 12px 0;
}
</style>

28
app/src/lib/components/BranchPreviewHeader.svelte
View File

@ -119,36 +119,36 @@
.header__wrapper {
z-index: var(--z-lifted);
position: sticky;
top: var(--size-12);
top: 12px;
}
.header {
z-index: var(--z-lifted);
position: relative;
flex-direction: column;
gap: var(--size-2);
gap: 2px;
}
.header__top-overlay {
z-index: var(--z-ground);
position: absolute;
top: calc(var(--size-16) * -1);
top: -16px;
left: 0;
width: 100%;
height: var(--size-20);
height: 20px;
background: var(--clr-bg-2);
}
.header__info {
display: flex;
flex-direction: column;
transition: margin var(--transition-slow);
padding: var(--size-10);
gap: var(--size-10);
padding: 10px;
gap: 10px;
overflow: hidden;
}
.header__actions {
display: flex;
gap: var(--size-4);
gap: 4px;
background: var(--clr-bg-2);
padding: var(--size-14);
padding: 14px;
justify-content: flex-end;
border-radius: 0 0 var(--radius-m) var(--radius-m);
user-select: none;
@ -156,15 +156,15 @@
.header__buttons {
display: flex;
position: relative;
gap: var(--size-4);
gap: 4px;
}
.header__remote-branch {
color: var(--clr-scale-ntrl-50);
padding-left: var(--size-2);
padding-right: var(--size-2);
padding-left: 2px;
padding-right: 2px;
display: flex;
gap: var(--size-4);
gap: 4px;
text-overflow: ellipsis;
overflow-x: hidden;
white-space: nowrap;
@ -175,8 +175,8 @@
cursor: default;
display: flex;
align-items: center;
gap: var(--size-2);
padding: var(--size-2) var(--size-6) var(--size-2) var(--size-4);
gap: 2px;
padding: 2px 6px 2px 4px;
border-radius: var(--radius-m);
}

16
app/src/lib/components/Branches.svelte
View File

@ -167,12 +167,12 @@
.scroll-container {
display: flex;
flex-direction: column;
gap: var(--size-12);
gap: 12px;
width: 100%;
height: 100%;
padding-bottom: var(--size-16);
padding-left: var(--size-14);
padding-right: var(--size-14);
padding-bottom: 16px;
padding-left: 14px;
padding-right: 14px;
}
.branch-list {
flex: 1;
@ -187,7 +187,7 @@
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--size-2);
gap: 2px;
}
/* EMPTY STATE */
@ -197,16 +197,16 @@
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--size-10);
gap: 10px;
}
.branch-list__empty-state__image {
width: 8.125rem;
width: 130px;
}
.branch-list__empty-state__caption {
color: var(--clr-scale-ntrl-60);
text-align: center;
max-width: 10rem;
max-width: 160px;
}
</style>

10
app/src/lib/components/BranchesHeader.svelte
View File

@ -49,8 +49,8 @@
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--size-14) var(--size-14) var(--size-12) var(--size-14);
gap: var(--size-8);
padding: 14px 14px 12px 14px;
gap: 8px;
border-bottom: 1px solid transparent;
transition: border-bottom var(--transition-fast);
position: relative;
@ -60,14 +60,14 @@
}
.filter-popup-menu {
position: absolute;
top: calc(var(--size-button) + var(--size-4));
top: calc(var(--size-button) + 4px);
right: 0;
z-index: var(--z-floating);
min-width: 10rem;
min-width: 160px;
}
.branches-title {
display: flex;
align-items: center;
gap: var(--size-4);
gap: 4px;
}
</style>

14
app/src/lib/components/Button.svelte
View File

@ -123,6 +123,7 @@
.label {
display: inline-flex;
white-space: nowrap;
}
.btn-icon {
@ -277,29 +278,28 @@
.btn.tag {
height: var(--size-tag);
padding: var(--size-2) var(--size-4);
padding: 2px 4px;
& .label {
padding: 0 var(--size-4);
white-space: nowrap;
padding: 0 4px;
}
}
.btn.button {
height: var(--size-button);
padding: var(--size-4) var(--size-6);
padding: 4px 6px;
& .label {
padding: 0 var(--size-4);
padding: 0 4px;
}
}
.btn.cta {
height: var(--size-cta);
padding: var(--size-6) var(--size-8);
padding: 6px 8px;
& .label {
padding: 0 var(--size-6);
padding: 0 6px;
}
}

8
app/src/lib/components/Checkbox.svelte
View File

@ -35,8 +35,8 @@
.checkbox {
appearance: none;
cursor: pointer;
width: var(--size-16);
height: var(--size-16);
width: 16px;
height: 16px;
flex-shrink: 0;
border-radius: var(--radius-s);
background-color: var(--clr-bg-1);
@ -127,8 +127,8 @@
/* modifiers */
&.small {
width: var(--size-14);
height: var(--size-14);
width: 14px;
height: 14px;
}
}
</style>

2
app/src/lib/components/CloudForm.svelte
View File

@ -167,7 +167,7 @@
.options {
display: flex;
flex-direction: column;
gap: var(--size-8);
gap: 8px;
}
.api-link {

32
app/src/lib/components/CommitCard.svelte
View File

@ -271,13 +271,13 @@
.commit-row {
position: relative;
display: flex;
gap: var(--size-8);
gap: 8px;
&.has-lines {
padding-right: var(--size-14);
padding-right: 14px;
}
/* border-top: 1px solid var(--clr-border-2); */
/* padding-left: var(--size-8); */
/* padding-left: 8px; */
&:not(.is-first) {
border-top: 1px solid var(--clr-border-3);
@ -299,7 +299,7 @@
transition: background-color var(--transition-fast);
&.is-first {
margin-top: var(--size-12);
margin-top: 12px;
border-top: 1px solid var(--clr-border-2);
border-top-left-radius: var(--radius-m);
border-top-right-radius: var(--radius-m);
@ -316,7 +316,7 @@
.accent-border-line {
position: absolute;
width: var(--size-4);
width: 4px;
height: 100%;
&.local {
background-color: var(--clr-commit-local);
@ -345,8 +345,8 @@
.commit__about {
display: flex;
flex-direction: column;
gap: var(--size-6);
padding: var(--size-14);
gap: 6px;
padding: 14px;
&:hover {
background-color: var(--clr-bg-1-muted);
@ -372,7 +372,7 @@
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: var(--size-4);
gap: 4px;
color: var(--clr-text-2);
overflow: hidden;
@ -390,7 +390,7 @@
.commit__id {
display: flex;
align-items: center;
gap: var(--size-4);
gap: 4px;
&:hover {
color: var(--clr-text-1);
@ -406,17 +406,17 @@
.commit__details {
display: flex;
flex-direction: column;
gap: var(--size-12);
padding: var(--size-14);
gap: 12px;
padding: 14px;
border-top: 1px solid var(--clr-border-2);
}
.commit__actions {
display: flex;
gap: var(--size-4);
gap: 4px;
overflow-x: auto;
margin: 0 calc(var(--size-14) * -1);
padding: 0 var(--size-14);
margin: 0 -14px;
padding: 0 14px;
}
/* FILES */
@ -432,12 +432,12 @@
& .commit-card {
&:not(.is-first) {
margin-top: var(--size-8);
margin-top: 8px;
border-top: 1px solid var(--clr-border-2);
}
&:not(.is-last) {
margin-bottom: var(--size-8);
margin-bottom: 8px;
border-bottom: 1px solid var(--clr-border-2);
}
}

6
app/src/lib/components/CommitDialog.svelte
View File

@ -88,7 +88,7 @@
.commit-box {
display: flex;
flex-direction: column;
padding: var(--size-14);
padding: 14px;
background: var(--clr-bg-1);
border-top: 1px solid var(--clr-border-2);
transition: background-color var(--transition-medium);
@ -97,13 +97,13 @@
.commit-box__expander {
display: flex;
flex-direction: column;
margin-bottom: var(--size-12);
margin-bottom: 12px;
}
.actions {
display: flex;
justify-content: right;
gap: var(--size-6);
gap: 6px;
}
.commit-box__expanded {

2
app/src/lib/components/CommitDragItem.svelte
View File

@ -131,7 +131,7 @@
display: flex;
position: relative;
padding: 0;
gap: var(--size-8);
gap: 8px;
flex-grow: 1;
overflow: hidden;
&:last-child {

4
app/src/lib/components/CommitLines.svelte
View File

@ -99,8 +99,8 @@
.lines {
display: flex;
align-items: stretch;
min-height: var(--size-12);
padding-left: var(--size-8);
min-height: 12px;
padding-left: 8px;
/* margin-top: -1px; */
}
</style>

24
app/src/lib/components/CommitList.svelte
View File

@ -307,17 +307,17 @@
border-top: 1px solid var(--clr-border-2);
border-bottom: 1px solid var(--clr-border-2);
--base-top-margin: var(--size-8);
--base-icon-top: var(--size-16);
--base-unfolded: var(--size-48);
--base-top-margin: 8px;
--base-icon-top: 16px;
--base-unfolded: 48px;
--avatar-first-top: 3.1rem;
--avatar-top: var(--size-16);
--avatar-first-top: 50px;
--avatar-top: 16px;
}
.commit-group {
/* padding-right: var(--size-14);
padding-left: var(--size-8); */
/* padding-right: 14px;
padding-left: 8px; */
}
/* BASE ROW */
@ -325,7 +325,7 @@
.base-row-container {
display: flex;
flex-direction: column;
height: var(--size-20);
height: 20px;
overflow: hidden;
transition: height var(--transition-medium);
@ -333,7 +333,7 @@
.base-row-container_unfolded {
height: var(--base-unfolded);
--base-icon-top: var(--size-20);
--base-icon-top: 20px;
& .base-row__text {
opacity: 1;
@ -342,7 +342,7 @@
.base-row {
display: flex;
gap: var(--size-8);
gap: 8px;
border-top: 1px solid var(--clr-border-3);
min-height: calc(var(--base-unfolded) - var(--base-top-margin));
margin-top: var(--base-top-margin);
@ -355,7 +355,7 @@
.base-row__lines {
display: flex;
margin-top: calc(var(--size-8) * -1);
margin-top: -8px;
}
.base-row__content {
@ -366,7 +366,7 @@
.base-row__text {
color: var(--clr-text-2);
opacity: 0;
margin-top: var(--size-2);
margin-top: 2px;
transition: opacity var(--transition-medium);
}

4
app/src/lib/components/CommitList/ReorderDropzone.svelte
View File

@ -45,12 +45,12 @@
:global(.reorder-dz-active .reorder-dz-marker) {
display: flex !important;
height: 3rem;
height: 48px;
width: var(--dropzone-width);
}
:global(.reorder-dz-active) {
height: calc(3rem);
height: 48px;
width: var(--dropzone-width);
}
</style>

20
app/src/lib/components/CommitMessageInput.svelte
View File

@ -223,9 +223,9 @@
.commit-box__textarea-wrapper {
display: flex;
position: relative;
padding: 0 0 var(--size-48);
padding: 0 0 48px;
flex-direction: column;
gap: var(--size-4);
gap: 4px;
}
.commit-box__textarea {
@ -233,7 +233,7 @@
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--size-16);
gap: 16px;
background: none;
resize: none;
&:focus {
@ -248,26 +248,26 @@
.commit-box__textarea-tooltip {
position: absolute;
display: flex;
bottom: var(--size-12);
left: var(--size-12);
padding: var(--size-2);
bottom: 12px;
left: 12px;
padding: 2px;
border-radius: 100%;
background: var(--clr-bg-2);
color: var(--clr-scale-ntrl-40);
}
.commit-box__textarea__title {
padding: var(--size-12) var(--size-12) 0 var(--size-12);
padding: 12px 12px 0 12px;
}
.commit-box__textarea__description {
padding: 0 var(--size-12) 0 var(--size-12);
padding: 0 12px 0 12px;
}
.commit-box__texarea-actions {
position: absolute;
display: flex;
right: var(--size-12);
bottom: var(--size-12);
right: 12px;
bottom: 12px;
}
</style>

14
app/src/lib/components/CredentialCheck.svelte
View File

@ -125,34 +125,34 @@
.credential-check {
display: flex;
flex-direction: column;
gap: var(--size-16);
gap: 16px;
}
.checks-list {
display: flex;
flex-direction: column;
gap: var(--size-4);
margin-top: var(--size-4);
gap: 4px;
margin-top: 4px;
}
.check-icon {
display: flex;
margin-top: 0.063rem;
}
.check-result {
display: flex;
gap: var(--size-6);
align-items: center;
gap: 6px;
}
.help-text {
margin-top: var(--size-6);
margin-top: 6px;
}
.disclaimer {
color: var(--clr-scale-ntrl-50);
background: var(--clr-bg-2);
border-radius: var(--radius-m);
padding: var(--size-10) var(--size-12);
padding: 10px 12px;
}
</style>

30
app/src/lib/components/DecorativeSplitView.svelte
View File

@ -82,7 +82,7 @@
.left-side {
display: grid;
align-items: center;
padding: var(--size-40) calc(var(--size-40) * 2);
padding: 40px 80px;
flex: 1.3;
background-color: var(--clr-bg-1);
overflow-y: auto;
@ -93,16 +93,16 @@
flex-direction: column;
margin: 0 auto;
width: 100%;
max-width: 32rem;
max-width: 512px;
}
/* RIGHT SIDE */
.right-side {
flex: 1;
min-width: 28rem;
min-width: 448px;
background-color: var(--clr-bg-1);
padding: var(--size-20) var(--size-20) var(--size-20) 0;
padding: 20px 20px 20px 0;
}
.right-side-wrapper {
@ -112,7 +112,7 @@
flex-direction: column;
height: 100%;
background-color: var(--clr-illustration-bg);
border-radius: var(--size-8);
border-radius: 8px;
}
.right-side__header {
@ -123,7 +123,7 @@
display: flex;
align-items: center;
justify-content: flex-end;
padding: var(--size-20);
padding: 20px;
}
.right-side__footer {
@ -134,19 +134,19 @@
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: var(--size-32);
padding: 32px;
}
.wordmark {
position: absolute;
color: var(--clr-scale-pop-30);
right: var(--size-32);
bottom: var(--size-32);
right: 32px;
bottom: 32px;
}
.account-button {
right: var(--size-32);
top: var(--size-32);
right: 32px;
top: 32px;
}
/* links */
@ -156,14 +156,14 @@
display: flex;
align-items: flex-start;
flex-direction: column;
gap: var(--size-4);
gap: 4px;
}
.right-side__link {
display: flex;
align-items: center;
gap: var(--size-10);
padding: var(--size-6);
gap: 10px;
padding: 6px;
border-radius: var(--radius-m);
transition: background-color var(--transition-fast);
@ -178,7 +178,7 @@
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 25rem;
max-width: 400px;
overflow: hidden;
}
</style>

4
app/src/lib/components/DetailsForm.svelte
View File

@ -64,12 +64,12 @@
.fields-wrapper {
display: flex;
flex-direction: column;
gap: var(--size-16);
gap: 16px;
}
.description-wrapper {
display: flex;
flex-direction: column;
gap: var(--size-8);
gap: 8px;
}
</style>

8
app/src/lib/components/DomainButton.svelte
View File

@ -41,17 +41,17 @@
.domain-button {
display: flex;
align-items: center;
gap: var(--size-10);
gap: 10px;
border-radius: var(--radius-m);
padding: var(--size-10);
padding: 10px;
color: var(--clr-text-1);
transition: background-color var(--transition-fast);
}
.icon {
border-radius: var(--radius-s);
height: var(--size-20);
width: var(--size-20);
height: 20px;
width: 20px;
flex-shrink: 0;
}

4
app/src/lib/components/DropDownButton.svelte
View File

@ -91,12 +91,12 @@
.dropdown-top {
bottom: 100%;
padding-bottom: var(--size-4);
padding-bottom: 4px;
}
.dropdown-bottom {
top: 100%;
padding-top: var(--size-4);
padding-top: 4px;
}
.wide {

2
app/src/lib/components/DropzoneOverlay.svelte
View File

@ -55,7 +55,7 @@
.dropzone-content {
display: flex;
align-items: center;
gap: var(--size-6);
gap: 6px;
color: var(--clr-scale-pop-40);
}

10
app/src/lib/components/EmptyStatePlaceholder.svelte
View File

@ -10,7 +10,7 @@
<div
class="empty-state"
style:max-width={width}
style:margin-bottom={hasBottomShift ? 'var(--size-48)' : '0'}
style:margin-bottom={hasBottomShift ? '48px' : '0'}
>
<div class="empty-state__image">
{@html image}
@ -50,9 +50,9 @@
color: var(--clr-scale-ntrl-60);
background: var(--clr-bg-1);
justify-content: center;
padding: var(--size-48) 0;
padding: 48px 0;
width: 100%;
gap: var(--size-16);
gap: 16px;
border-radius: var(--radius-m);
cursor: default; /* was defaulting to text cursor */
}
@ -60,7 +60,7 @@
.empty-state__content {
display: flex;
flex-direction: column;
gap: var(--size-8);
gap: 8px;
}
.empty-state__title {
@ -78,6 +78,6 @@
}
.empty-state__image {
width: 7.5rem;
width: 120px;
}
</style>

19
app/src/lib/components/FileCardHeader.svelte
View File

@ -75,30 +75,30 @@
<style lang="postcss">
.header {
display: flex;
padding: var(--size-10);
gap: var(--size-12);
padding: 10px;
gap: 12px;
border-bottom: 1px solid var(--clr-border-2);
}
.header__inner {
display: flex;
flex-grow: 1;
gap: var(--size-8);
padding: var(--size-4);
gap: 8px;
padding: 4px;
overflow: hidden;
}
.header__info {
display: flex;
flex-direction: column;
gap: var(--size-8);
gap: 8px;
width: 100%;
}
.header__tags {
display: flex;
gap: var(--size-6);
gap: 6px;
}
.header__tag-group {
display: flex;
gap: var(--size-2);
gap: 2px;
}
.header__filetitle {
width: 100%;
@ -113,8 +113,7 @@
}
.icon {
flex-shrink: 0;
width: var(--size-14);
height: var(--size-14);
margin-top: calc(var(--size-2) / 2);
width: 14px;
height: 14px;
}
</style>

6
app/src/lib/components/FileContextMenu.svelte
View File

@ -131,10 +131,10 @@
<style lang="postcss">
.file-list {
list-style: disc;
padding-left: var(--size-20);
padding-top: var(--size-6);
padding-left: 20px;
padding-top: 6px;
}
.file-list li {
padding: var(--size-2);
padding: 2px;
}
</style>

8
app/src/lib/components/FileDiff.svelte
View File

@ -89,18 +89,18 @@
position: relative;
max-height: 100%;
flex-shrink: 0;
padding: var(--size-14);
gap: var(--size-16);
padding: 14px;
gap: 16px;
}
.hunk-wrapper {
display: flex;
flex-direction: column;
gap: var(--size-10);
gap: 10px;
}
.indicators {
display: flex;
align-items: center;
gap: var(--size-2);
gap: 2px;
}
.added {
color: #45b156;

12
app/src/lib/components/FileListItem.svelte
View File

@ -148,9 +148,9 @@
flex: 1;
display: flex;
align-items: center;
padding: var(--size-6) var(--size-14);
gap: var(--size-10);
height: 2rem;
padding: 6px 14px;
gap: 10px;
height: 32px;
overflow: hidden;
text-align: left;
user-select: none;
@ -163,7 +163,7 @@
}
&:last-child {
margin-bottom: -1px;
border-bottom: none;
}
}
@ -172,12 +172,12 @@
align-items: center;
flex-grow: 1;
flex-shrink: 1;
gap: var(--size-6);
gap: 6px;
overflow: hidden;
}
.file-icon {
width: var(--size-12);
width: 12px;
}
.name {

4
app/src/lib/components/FileStatusCircle.svelte
View File

@ -14,8 +14,8 @@
<style lang="postcss">
.status {
border-radius: 100%;
width: var(--size-8);
height: var(--size-8);
width: 8px;
height: 8px;
border-radius: 100%;
flex-shrink: 0;
}

2
app/src/lib/components/FileStatusIcons.svelte
View File

@ -42,7 +42,7 @@
.file-status {
display: flex;
align-items: center;
gap: var(--size-4);
gap: 4px;
}
.file-status__icons {
display: flex;

10
app/src/lib/components/Footer.svelte
View File

@ -42,22 +42,22 @@
.footer {
display: flex;
justify-content: space-between;
padding: var(--size-12);
gap: var(--size-6);
padding: 12px;
gap: 6px;
border-top: 1px solid var(--clr-border-2);
border-color: var(--clr-border-2);
}
.left-btns {
display: flex;
gap: var(--size-2);
gap: 2px;
}
.footer.collapsed {
flex-direction: column;
padding: 0 var(--size-14);
padding: 0 14px;
align-items: flex-start;
gap: var(--size-4);
gap: 4px;
border: none;
& .left-btns {

36
app/src/lib/components/GithubIntegration.svelte
View File

@ -195,13 +195,13 @@
.wrapper {
display: flex;
flex-direction: column;
margin-bottom: var(--size-8);
margin-bottom: 8px;
}
.step-section {
display: flex;
gap: var(--size-16);
margin-left: var(--size-8);
gap: 16px;
margin-left: 8px;
&:last-child {
& .step-section__content {
@ -224,9 +224,9 @@
flex-direction: column;
align-items: flex-start;
width: 100%;
gap: var(--size-12);
margin-left: var(--size-8);
margin-bottom: var(--size-12);
gap: 12px;
margin-left: 8px;
margin-bottom: 12px;
&:before {
content: '';
@ -234,8 +234,8 @@
width: 100%;
height: 1px;
background-color: var(--clr-scale-ntrl-60);
margin-top: var(--size-8);
margin-bottom: var(--size-6);
margin-top: 8px;
margin-bottom: 6px;
opacity: 0.4;
}
}
@ -245,7 +245,7 @@
.step-line {
position: relative;
width: 1px;
margin-top: var(--size-4);
margin-top: 4px;
border-right: 1px dashed var(--clr-scale-ntrl-60);
&::before {
@ -253,8 +253,8 @@
position: absolute;
left: 50%;
transform: translateX(-50%);
width: var(--size-10);
height: var(--size-10);
width: 10px;
height: 10px;
background-color: var(--clr-scale-ntrl-60);
border-radius: 100%;
}
@ -264,15 +264,15 @@
border-right: 1px dashed var(--clr-scale-ntrl-60);
&::before {
top: var(--size-28);
top: 28px;
}
}
.step-line-last {
height: 1.875rem;
height: 30px;
&::before {
top: 1.875rem;
top: 30px;
}
}
@ -287,18 +287,18 @@
display: flex;
align-items: center;
justify-content: center;
bottom: calc(var(--size-4) * -1);
right: calc(var(--size-4) * -1);
bottom: -4px;
right: -4px;
background-color: var(--clr-scale-ntrl-100);
border-radius: 50px;
}
.code-wrapper {
display: flex;
gap: var(--size-10);
gap: 10px;
align-items: center;
align-self: flex-start;
padding: var(--size-6) var(--size-6) var(--size-6) var(--size-8);
padding: 6px 6px 6px 8px;
border-radius: var(--radius-m);
background-color: var(--clr-bg);
border: 1px solid var(--clr-border-2);

36
app/src/lib/components/History.svelte
View File

@ -240,15 +240,15 @@
overflow: hidden;
background-color: var(--clr-bg-1);
border-left: 1px solid var(--clr-border-2);
width: 28rem;
width: 448px;
}
/* SIDEVIEW HEADER */
.sideview__header {
display: flex;
align-items: center;
gap: var(--size-12);
padding: var(--size-10) var(--size-10) var(--size-10) var(--size-12);
gap: 12px;
padding: 10px 10px 10px 12px;
border-bottom: 1px solid var(--clr-border-2);
}
@ -260,8 +260,8 @@
.clock-icon {
pointer-events: none;
position: relative;
width: var(--size-20);
height: var(--size-20);
width: 20px;
height: 20px;
background-color: #ffcf88;
border-radius: var(--radius-s);
}
@ -272,18 +272,18 @@
left: 50%;
transform: translate(-50%, -50%);
border-radius: 100%;
width: 0.125rem;
height: 0.125rem;
width: 2px;
height: 2px;
background-color: #000;
}
.clock-pointer {
position: absolute;
bottom: -0.125rem;
bottom: -2px;
left: 50%;
transform-origin: bottom;
width: 0.125rem;
height: calc(var(--size-12) / 2);
width: 2px;
height: 6px;
background-color: #000;
}
@ -317,10 +317,10 @@
/* DATE HEADER */
.sideview__date-header {
padding: var(--size-20) var(--size-14) var(--size-14) 6.8rem;
padding: 20px 14px 14px 108px;
border-top: 1px solid var(--clr-border-2);
background-color: var(--clr-bg-1);
margin-top: var(--size-12);
margin-top: 12px;
& h4 {
color: var(--clr-text-3);
@ -338,22 +338,22 @@
z-index: var(--z-ground);
display: flex;
flex-direction: column;
width: 32rem;
width: 512px;
border-left: 1px solid var(--clr-border-2);
}
/* WELCOME POINT */
.welcome-point {
display: flex;
gap: var(--size-10);
padding: var(--size-12) var(--size-16) var(--size-32) 5.3rem;
gap: 10px;
padding: 12px 16px 32px 84px;
}
.welcome-point__content {
display: flex;
flex-direction: column;
gap: var(--size-8);
margin-top: var(--size-4);
gap: 8px;
margin-top: 4px;
}
.welcome-point__caption {
@ -363,7 +363,7 @@
.load-more {
display: flex;
justify-content: center;
padding: var(--size-24) var(--size-14);
padding: 24px 14px;
}
.load-more span {

12
app/src/lib/components/HunkLine.svelte
View File

@ -82,7 +82,7 @@
white-space: pre;
tab-size: var(--tab-size);
font-size: 0.688rem;
font-size: 11px;
line-height: 1.5;
}
@ -100,12 +100,12 @@
color: var(--clr-text-3);
border-color: var(--clr-border-2);
background-color: var(--clr-bg-1-muted);
font-size: 0.625rem;
font-size: 10px;
flex-shrink: 0;
user-select: none;
border-right-width: 1px;
padding-left: 0.125rem;
padding-right: 0.125rem;
padding-left: 2px;
padding-right: 2px;
text-align: right;
&.selected {
@ -118,7 +118,7 @@
.selectable-wrapper {
cursor: text;
display: inline-block;
text-indent: var(--size-4);
margin-right: var(--size-4);
text-indent: 4px;
margin-right: 4px;
}
</style>

2
app/src/lib/components/Icon.svelte
View File

@ -43,7 +43,7 @@
<style lang="postcss">
.icon-wrapper {
--spinner-stroke-width: calc(var(--size-2) / 1.4);
--spinner-stroke-width: 1.5;
flex-shrink: 0;
pointer-events: none;
display: inline-block;

4
app/src/lib/components/IconLink.svelte
View File

@ -16,8 +16,8 @@
.link {
display: flex;
align-items: center;
gap: var(--size-10);
padding: var(--size-4) var(--size-6);
gap: 10px;
padding: 4px 6px;
border-radius: var(--radius-m);
transition: background-color var(--transition-fast);

18
app/src/lib/components/InfoMessage.svelte
View File

@ -94,9 +94,9 @@
.info-message {
color: var(--clr-scale-ntrl-0);
display: flex;
padding: var(--size-14);
padding: 14px;
border-radius: var(--radius-m);
gap: var(--size-12);
gap: 12px;
background-color: var(--clr-bg-1);
transition:
background-color var(--transition-slow),
@ -106,18 +106,18 @@
display: flex;
flex-grow: 1;
flex-direction: column;
gap: var(--size-12);
gap: 12px;
overflow-x: hidden;
}
.info-message__content {
display: flex;
flex-direction: column;
gap: var(--size-8);
gap: 8px;
user-select: text;
}
.info-message__actions {
display: flex;
gap: var(--size-6);
gap: 6px;
justify-content: flex-end;
}
.info-message__text {
@ -177,12 +177,12 @@
/* ERROR BLOCK */
.info-message__error-block {
user-select: auto;
padding: var(--size-4) var(--size-8);
padding: 4px 8px;
overflow-x: auto;
background-color: var(--clr-scale-err-90);
color: var(--clr-scale-err-10);
border-radius: var(--radius-s);
font-size: var(--size-12);
font-size: 12px;
/* scrollbar */
&::-webkit-scrollbar {
@ -207,10 +207,10 @@
word-break: break-all; /* allow long links to wrap */
}
:global(.info-message__text p:not(:last-child)) {
margin-bottom: var(--size-10);
margin-bottom: 10px;
}
:global(.info-message__text ul) {
list-style-type: circle;
padding: 0 0 0 var(--size-16);
padding: 0 0 0 16px;
}
</style>

4
app/src/lib/components/KeysForm.svelte
View File

@ -220,14 +220,14 @@
.inputs-group {
display: flex;
flex-direction: column;
gap: var(--size-16);
gap: 16px;
width: 100%;
}
.row-buttons {
display: flex;
justify-content: flex-end;
gap: var(--size-8);
gap: 8px;
}
.git-radio {

4
app/src/lib/components/LargeDiffMessage.svelte
View File

@ -20,8 +20,8 @@
<style>
.large-diff-message {
display: flex;
padding: var(--size-12);
gap: var(--size-8);
padding: 12px;
gap: 8px;
flex-direction: column;
background-color: var(--clr-bg-1);
}

2
app/src/lib/components/Link.svelte
View File

@ -52,7 +52,7 @@
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--size-2);
gap: 2px;
border-radius: var(--radius-m);
transition: background-color var(--transition-fast);
text-decoration: underline;

4
app/src/lib/components/ListItem.svelte
View File

@ -31,7 +31,7 @@
align-items: center;
color: var(--clr-scale-ntrl-10);
font-weight: 700;
padding: var(--size-10) var(--size-10);
padding: 10px 10px;
justify-content: space-between;
border-radius: var(--radius-m);
width: 100%;
@ -53,7 +53,7 @@
color: var(--clr-scale-ntrl-50);
}
& .label {
height: var(--size-16);
height: 16px;
text-overflow: ellipsis;
overflow: hidden;
}

20
app/src/lib/components/LocalLine.svelte
View File

@ -38,15 +38,15 @@
<style lang="postcss">
.local-column {
position: relative;
width: var(--size-14);
width: 14px;
/* background-color: rgba(255, 228, 196, 0.46); */
}
.local-line {
position: absolute;
width: var(--size-2);
width: 2px;
background-color: var(--clr-commit-local);
left: var(--size-4);
left: 4px;
top: 0;
bottom: 0;
&.dashed {
@ -59,7 +59,7 @@
);
}
&.has-root {
bottom: var(--size-8);
bottom: 8px;
}
&.tip {
bottom: calc(100% - var(--avatar-first-top));
@ -74,15 +74,15 @@
.root {
position: absolute;
width: var(--size-10);
top: calc(100% - var(--size-14));
left: calc(-1 * var(--size-4));
bottom: calc(-1 * var(--size-2));
width: 10px;
top: calc(100% - 14px);
left: -4px;
bottom: -2px;
border-radius: 0 0 var(--radius-l) 0;
border-color: var(--clr-commit-local);
border-width: 0 var(--size-2) var(--size-2) 0;
border-width: 0 2px 2px 0;
&.long-root {
bottom: -2rem;
bottom: -32px;
}
}
</style>

18
app/src/lib/components/Modal.svelte
View File

@ -71,7 +71,7 @@
.dialog-wrap {
position: relative;
width: 100%;
max-height: calc(100vh - 5rem);
max-height: calc(100vh - 80px);
border-radius: var(--radius-l);
background-color: var(--clr-bg-1);
border: 1px solid var(--clr-border-2);
@ -86,35 +86,35 @@
/* modifiers */
.s-large {
max-width: calc(var(--size-64) * 13);
max-width: 840px;
}
.s-default {
max-width: calc(var(--size-64) * 9);
max-width: 580px;
}
.s-small {
max-width: calc(var(--size-64) * 6);
max-width: 380px;
}
.modal__header {
display: flex;
padding: var(--size-16);
gap: var(--size-8);
padding: 16px;
gap: 8px;
border-bottom: 1px solid var(--clr-border-2);
}
.modal__body {
overflow: auto;
padding: var(--size-16);
padding: 16px;
}
.modal__footer {
display: flex;
width: 100%;
justify-content: flex-end;
gap: var(--size-8);
padding: var(--size-16);
gap: 8px;
padding: 16px;
border-top: 1px solid var(--clr-border-2);
background-color: var(--clr-bg-1);
}

24
app/src/lib/components/Navigation.svelte
View File

@ -144,13 +144,13 @@
& .folding-button {
pointer-events: auto;
opacity: 1;
right: calc(var(--size-6) * -1);
right: -6px;
}
}
}
.navigation {
width: 17.5rem;
width: 280px;
display: flex;
flex-direction: column;
position: relative;
@ -161,19 +161,19 @@
.drag-region {
flex-shrink: 0;
height: var(--size-20);
height: 20px;
}
.navigation-top {
display: flex;
flex-direction: column;
padding-bottom: var(--size-24);
padding-left: var(--size-14);
padding-right: var(--size-14);
padding-bottom: 24px;
padding-left: 14px;
padding-right: 14px;
}
.domains {
display: flex;
flex-direction: column;
gap: var(--size-4);
gap: 4px;
}
.resizer-wrapper {
@ -181,7 +181,7 @@
top: 0;
right: 0;
height: 100%;
width: var(--size-4);
width: 4px;
}
/* FOLDING BUTTON */
@ -192,10 +192,10 @@
align-items: center;
justify-content: center;
position: absolute;
right: calc(var(--size-4) * -1);
right: -4px;
top: 50%;
width: 0.875rem;
height: var(--size-36);
width: 14px;
height: 36px;
background: var(--clr-bg-1);
border-radius: var(--radius-m);
border: 1px solid var(--clr-border-2);
@ -231,7 +231,7 @@
.navigation.collapsed {
width: auto;
justify-content: space-between;
padding-bottom: var(--size-16);
padding-bottom: 16px;
}
.resizer-hovered {

12
app/src/lib/components/NewBranchDropZone.svelte
View File

@ -81,7 +81,7 @@
height: 100%;
user-select: none;
display: flex;
padding: var(--size-12);
padding: 12px;
}
.new-virtual-branch {
@ -89,12 +89,12 @@
flex-direction: column;
align-items: center;
justify-content: center;
width: 22rem;
width: 352px;
border-radius: var(--radius-m);
border: 1px dashed var(--clr-border-2);
background-color: transparent;
padding: var(--size-20);
gap: var(--size-8);
padding: 20px;
gap: 8px;
outline-color: transparent;
outline-style: dashed;
@ -113,9 +113,9 @@
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--size-12);
gap: 12px;
transition: transform var(--transition-medium);
padding: var(--size-20) var(--size-24) var(--size-16) var(--size-24);
padding: 20px 24px 16px 24px;
}
/* ILLUSTRATION */

14
app/src/lib/components/NotOnGitButlerBranch.svelte
View File

@ -91,31 +91,31 @@
<style lang="postcss">
.project-name {
display: flex;
gap: var(--size-8);
gap: 8px;
align-items: center;
line-height: 120%;
color: var(--clr-scale-ntrl-30);
margin-bottom: var(--size-20);
margin-bottom: 20px;
}
.switchrepo__title {
color: var(--clr-scale-ntrl-30);
margin-bottom: var(--size-12);
margin-bottom: 12px;
}
.switchrepo__message {
color: var(--clr-scale-ntrl-50);
margin-bottom: var(--size-20);
margin-bottom: 20px;
}
.switchrepo__actions {
display: flex;
gap: var(--size-8);
padding-bottom: var(--size-24);
gap: 8px;
padding-bottom: 24px;
flex-wrap: wrap;
}
.switchrepo__project {
padding-top: var(--size-24);
padding-top: 24px;
border-top: 1px dashed var(--clr-scale-ntrl-60);
}
</style>

6
app/src/lib/components/PassphraseBox.svelte
View File

@ -64,8 +64,8 @@
.passbox {
display: flex;
flex-direction: column;
gap: var(--size-8);
padding: var(--size-14);
gap: 8px;
padding: 14px;
border-radius: var(--radius-m);
background-color: var(--clr-bg-2);
}
@ -76,6 +76,6 @@
.passbox__actions {
display: flex;
gap: var(--size-6);
gap: 6px;
}
</style>

2
app/src/lib/components/PreferencesForm.svelte
View File

@ -129,6 +129,6 @@
.wrapper {
display: flex;
flex-direction: column;
gap: var(--size-8);
gap: 8px;
}
</style>

16
app/src/lib/components/ProblemLoadingRepo.svelte
View File

@ -65,37 +65,37 @@
<style lang="postcss">
.problem__project {
display: flex;
gap: var(--size-8);
gap: 8px;
align-items: center;
line-height: 120%;
color: var(--clr-scale-ntrl-30);
margin-bottom: var(--size-20);
margin-bottom: 20px;
}
.problem__title {
color: var(--clr-scale-ntrl-30);
margin-bottom: var(--size-12);
margin-bottom: 12px;
}
.problem__switcher {
text-align: right;
margin-top: var(--size-24);
margin-top: 24px;
}
.problem__error {
display: flex;
color: var(--clr-scale-ntrl-0);
gap: var(--size-12);
padding: var(--size-20);
gap: 12px;
padding: 20px;
background-color: var(--clr-theme-err-bg);
border-radius: var(--radius-m);
margin-bottom: var(--size-12);
margin-bottom: 12px;
}
.remove-project-btn {
display: flex;
justify-content: flex-end;
padding-bottom: var(--size-24);
padding-bottom: 24px;
border-bottom: 1px dashed var(--clr-scale-ntrl-60);
}
</style>

4
app/src/lib/components/ProjectAvatar.svelte
View File

@ -42,8 +42,8 @@
<style>
.project-avatar {
flex-shrink: 0;
width: var(--size-20);
height: var(--size-20);
width: 20px;
height: 20px;
border-radius: var(--radius-m);
}

2
app/src/lib/components/ProjectNameLabel.svelte
View File

@ -15,7 +15,7 @@
align-self: flex-start;
display: flex;
align-items: center;
gap: var(--size-6);
gap: 6px;
border-radius: var(--radius-s);
color: var(--clr-scale-ntrl-50);
}

8
app/src/lib/components/ProjectSelector.svelte
View File

@ -47,16 +47,16 @@
<style lang="postcss">
.wrapper {
position: relative;
margin-top: var(--size-14);
margin-bottom: var(--size-16);
margin-top: 14px;
margin-bottom: 16px;
height: fit-content;
}
.button {
display: flex;
gap: var(--size-10);
gap: 10px;
width: 100%;
padding: var(--size-8);
padding: 8px;
align-items: center;
justify-content: space-between;

2
app/src/lib/components/ProjectSetup.svelte
View File

@ -63,7 +63,7 @@
<style lang="postcss">
.actions {
margin-top: var(--size-20);
margin-top: 20px;
text-align: right;
}
</style>

16
app/src/lib/components/ProjectSetupTarget.svelte
View File

@ -254,7 +254,7 @@
.project-setup {
display: flex;
flex-direction: column;
gap: var(--size-20);
gap: 20px;
}
.features-wrapper {
@ -264,14 +264,14 @@
.project-setup__info {
display: flex;
flex-direction: column;
gap: var(--size-12);
gap: 12px;
}
.project-setup__fields {
display: flex;
flex-direction: column;
gap: var(--size-16);
padding-bottom: var(--size-10);
gap: 16px;
padding-bottom: 10px;
}
.project-setup__description-text {
@ -281,19 +281,19 @@
.project-setup__field-wrap {
display: flex;
flex-direction: column;
gap: var(--size-12);
gap: 12px;
}
.floating-buttons {
display: flex;
justify-content: flex-end;
width: 100%;
gap: var(--size-8);
gap: 8px;
}
.success-icon {
display: inline;
margin-top: calc(var(--size-2) * -1);
margin-left: var(--size-2);
margin-top: -2px;
margin-left: 2px;
}
</style>

2
app/src/lib/components/ProjectSwitcher.svelte
View File

@ -64,7 +64,7 @@
.project-switcher {
display: flex;
flex-direction: column;
gap: var(--size-10);
gap: 10px;
align-items: flex-end;
}
</style>

8
app/src/lib/components/ProjectsPopup.svelte
View File

@ -69,7 +69,7 @@
top: 100%;
z-index: var(--z-floating);
width: 100%;
margin-top: var(--size-6);
margin-top: 6px;
border-radius: var(--m, 6px);
border: 1px solid var(--clr-border-2);
background: var(--clr-bg-1);
@ -77,14 +77,14 @@
box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.1);
}
.popup__actions {
padding: var(--size-8);
padding: 8px;
border-top: 1px solid var(--clr-scale-ntrl-70);
}
.popup__projects {
display: flex;
flex-direction: column;
gap: var(--size-2);
padding: var(--size-8);
gap: 2px;
padding: 8px;
}
/* MODIFIERS */

2
app/src/lib/components/PromptModal.svelte
View File

@ -78,6 +78,6 @@
<style lang="postcss">
.message {
padding-bottom: var(--size-12);
padding-bottom: 12px;
}
</style>

18
app/src/lib/components/PullRequestCard.svelte
View File

@ -363,33 +363,33 @@
<style lang="postcss">
.pr-card {
position: relative;
padding: var(--size-14);
margin-bottom: var(--size-8);
padding: 14px;
margin-bottom: 8px;
}
.pr-title {
color: var(--clr-scale-ntrl-0);
margin-bottom: var(--size-12);
margin-right: var(--size-28);
margin-bottom: 12px;
margin-right: 28px;
user-select: text;
cursor: text;
}
.pr-tags {
display: flex;
gap: var(--size-4);
gap: 4px;
}
.pr-actions {
margin-top: var(--size-14);
margin-top: 14px;
display: flex;
flex-direction: column;
gap: var(--size-8);
gap: 8px;
}
.floating-button {
position: absolute;
right: var(--size-6);
top: var(--size-6);
right: 6px;
top: 6px;
}
</style>

10
app/src/lib/components/PullRequestPreview.svelte
View File

@ -144,18 +144,18 @@
.wrapper {
display: flex;
flex-direction: column;
gap: var(--size-16);
max-width: 56rem;
gap: 16px;
max-width: 896px;
}
.card__content {
gap: var(--size-12);
gap: 12px;
}
.card__title-pr {
opacity: 0.4;
margin-left: var(--size-4);
margin-left: 4px;
}
.fork-notice {
margin-bottom: var(--size-8);
margin-bottom: 8px;
}
</style>

6
app/src/lib/components/QuickActionMenu.svelte
View File

@ -53,15 +53,15 @@
width: fit-content;
height: 2rem;
height: 32px;
margin-left: auto;
align-items: center;
gap: var(--size-4);
gap: 4px;
padding: var(--size-4);
padding: 4px;
background-color: var(--clr-bg-1);
border-radius: var(--radius-l);
border: 1px var(--clr-border-3) solid;

20
app/src/lib/components/RadioButton.svelte
View File

@ -24,9 +24,9 @@
.radio {
appearance: none;
cursor: pointer;
width: var(--size-16);
height: var(--size-16);
border-radius: var(--size-16);
width: 16px;
height: 16px;
border-radius: 16px;
background-color: var(--clr-bg-1);
box-shadow: inset 0 0 0 1px var(--clr-border-2);
transition:
@ -77,11 +77,11 @@
&::after {
content: '';
position: absolute;
top: var(--size-4);
left: var(--size-4);
width: calc(100% - var(--size-8));
height: calc(100% - var(--size-8));
border-radius: var(--size-16);
top: 4px;
left: 4px;
width: calc(100% - 8px);
height: calc(100% - 8px);
border-radius: 16px;
background-color: var(--clr-scale-ntrl-0);
transition: background-color var(--transition-fast);
transform: scale(0.5);
@ -91,8 +91,8 @@
/* modifiers */
&.small {
width: var(--size-14);
height: var(--size-14);
width: 14px;
height: 14px;
}
}
</style>

8
app/src/lib/components/RemoteBranchPreview.svelte
View File

@ -122,15 +122,15 @@
display: flex;
overflow-x: auto;
align-items: flex-start;
padding: var(--size-12) var(--size-12) var(--size-12) var(--size-6);
width: 50rem;
padding: 12px 12px 12px 6px;
width: 800px;
}
.branch-preview {
display: flex;
flex-direction: column;
gap: var(--size-8);
margin: var(--size-12) var(--size-6) var(--size-12) var(--size-12);
gap: 8px;
margin: 12px 6px 12px 12px;
}
.card__content {

42
app/src/lib/components/RemoteLine.svelte
View File

@ -73,41 +73,41 @@
<style lang="postcss">
.remote-column {
position: relative;
width: var(--size-24);
width: 24px;
}
.remote-line {
position: absolute;
width: var(--size-2);
width: 2px;
background-color: var(--clr-commit-remote);
left: calc(var(--size-10) + 0.063rem);
left: 11px;
bottom: 0;
top: 0;
&.short {
top: calc(var(--avatar-top) + var(--size-4));
top: calc(var(--avatar-top) + 4px);
&.first {
top: calc(var(--avatar-first-top) + var(--size-4));
top: calc(var(--avatar-first-top) + 4px);
}
&.base {
top: calc(var(--avatar-top) + var(--size-8));
top: calc(var(--avatar-top) + 8px);
}
}
&.tip {
bottom: calc(100% - var(--avatar-top) - var(--size-4));
bottom: calc(100% - var(--avatar-top) - 4px);
&.first {
bottom: calc(100% - var(--avatar-first-top) - var(--size-4));
bottom: calc(100% - var(--avatar-first-top) - 4px);
}
&.base {
bottom: calc(100% - 1.5rem);
bottom: calc(100% - 24px);
}
}
&.dashed {
background: repeating-linear-gradient(
0,
transparent,
transparent 0.1875rem,
var(--clr-commit-remote) 0.1875rem,
var(--clr-commit-remote) 0.4375rem
transparent 3px,
var(--clr-commit-remote) 3px,
var(--clr-commit-remote) 7px
);
}
&.upstream {
@ -129,13 +129,13 @@
.root {
position: absolute;
width: var(--size-10);
top: 1.875rem;
width: 10px;
top: 30px;
border-radius: var(--radius-l) 0 0 0;
height: var(--size-20);
left: calc(var(--size-10) + 0.063rem);
height: 20px;
left: 11px;
border-color: var(--clr-commit-local);
border-width: var(--size-2) 0 0 var(--size-2);
border-width: 2px 0 0 2px;
&.base {
top: -1px;
}
@ -151,13 +151,13 @@
left: 50%;
transform: translateX(-50%);
background: var(--clr-commit-remote);
height: 1.125rem;
width: 1.125rem;
height: 18px;
width: 18px;
transition: top var(--transition-medium);
& svg {
height: var(--size-16);
width: var(--size-16);
height: 16px;
width: 16px;
}
}
</style>

2
app/src/lib/components/RemoveProjectButton.svelte
View File

@ -60,7 +60,7 @@
.remove-project-description {
display: flex;
flex-direction: column;
gap: var(--size-8);
gap: 8px;
}
.details-text {

10
app/src/lib/components/Resizer.svelte
View File

@ -127,9 +127,9 @@
<style lang="postcss">
.resizer {
--resizer-frame-thickness: var(--size-4);
--resizer-default-line-thickness: var(--size-2);
--resizer-hover-line-thickness: var(--size-8);
--resizer-frame-thickness: 4px;
--resizer-default-line-thickness: 2px;
--resizer-hover-line-thickness: 8px;
--resizer-default-line-color: none;
position: absolute;
@ -171,7 +171,7 @@
}
.horizontal {
width: var(--size-4);
width: 4px;
height: 100%;
cursor: col-resize;
top: 0;
@ -181,7 +181,7 @@
}
}
.vertical {
height: var(--size-4);
height: 4px;
width: 100%;
cursor: row-resize;
left: 0;

11
app/src/lib/components/Scrollbar.svelte
View File

@ -1,10 +1,11 @@
<script lang="ts" context="module">
export type ScrollbarPadding = { top?: string; right?: string; bottom?: string; left?: string };
export type ScrollbarPadding = { top?: number; right?: number; bottom?: number; left?: number };
</script>
<script lang="ts">
import { SETTINGS, type Settings } from '$lib/settings/userSettings';
import { getContextStoreBySymbol } from '$lib/utils/context';
import { pxToRem } from '$lib/utils/pxToRem';
import { onDestroy, createEventDispatcher } from 'svelte';
const userSettings = getContextStoreBySymbol<Settings>(SETTINGS);
@ -41,10 +42,10 @@
$: teardownTrack = setupTrack(track);
$: teardownContents = setupContents(contents);
$: paddingTop = padding.top ?? '0px';
$: paddingBottom = padding.bottom ?? '0px';
$: paddingRight = padding.right ?? '0px';
$: paddingLeft = padding.left ?? '0px';
$: paddingTop = pxToRem(padding.top) ?? '0px';
$: paddingBottom = pxToRem(padding.bottom) ?? '0px';
$: paddingRight = pxToRem(padding.right) ?? '0px';
$: paddingLeft = pxToRem(padding.left) ?? '0px';
$: wholeHeight = viewport?.scrollHeight ?? 0;
$: wholeWidth = viewport?.scrollWidth ?? 0;

8
app/src/lib/components/SectionCard.svelte
View File

@ -79,8 +79,8 @@
.section-card {
position: relative;
display: flex;
gap: var(--size-16);
padding: var(--size-16);
gap: 16px;
padding: 16px;
border-left-width: 1px;
border-right-width: 1px;
border-color: var(--clr-border-2);
@ -104,14 +104,14 @@
background: var(--clr-theme-warn-bg);
}
.extra-padding {
padding: var(--size-20);
padding: 20px;
}
.section-card__content {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--size-8);
gap: 8px;
user-select: text;
}

6
app/src/lib/components/SegmentControl/Segment.svelte
View File

@ -75,7 +75,7 @@
flex-basis: 0;
align-items: center;
justify-content: center;
gap: var(--size-4);
gap: 4px;
height: var(--size-button);
@ -128,11 +128,11 @@
/* MODIFIERS */
.segment-small {
height: var(--size-tag);
padding: var(--size-2) var(--size-4);
padding: 2px 4px;
}
.segment-medium {
height: var(--size-button);
padding: var(--size-4) var(--size-8);
padding: 4px 8px;
}
</style>

8
app/src/lib/components/Select.svelte
View File

@ -114,7 +114,7 @@
position: relative;
display: flex;
flex-direction: column;
gap: var(--size-6);
gap: 6px;
}
.select__label {
@ -128,7 +128,7 @@
top: 100%;
width: 100%;
z-index: var(--z-floating);
margin-top: var(--size-4);
margin-top: 4px;
border-radius: var(--radius-m);
border: 1px solid var(--clr-border-2);
background: var(--clr-bg-1);
@ -139,8 +139,8 @@
.options__group {
display: flex;
flex-direction: column;
padding: var(--size-6);
gap: var(--size-2);
padding: 6px;
gap: 2px;
&:not(&:first-child):last-child {
border-top: 1px solid var(--clr-border-2);

4
app/src/lib/components/SelectItem.svelte
View File

@ -33,7 +33,7 @@
align-items: center;
color: var(--clr-scale-ntrl-10);
font-weight: 700;
padding: var(--size-8) var(--size-8);
padding: 8px 8px;
justify-content: space-between;
border-radius: var(--radius-m);
width: 100%;
@ -54,7 +54,7 @@
color: var(--clr-scale-ntrl-50);
}
& .label {
height: var(--size-16);
height: 16px;
text-overflow: ellipsis;
overflow-x: hidden;
}

12
app/src/lib/components/SetupFeature.svelte
View File

@ -46,8 +46,8 @@
<style lang="postcss">
.setup-feature {
display: flex;
gap: var(--size-16);
padding: var(--size-20);
gap: 16px;
padding: 20px;
}
.disabled.setup-feature {
background: var(--clr-bg-2);
@ -61,11 +61,11 @@
display: flex;
flex-direction: column;
flex-grow: 1;
gap: var(--size-10);
gap: 10px;
}
.setup-feature__title {
gap: var(--size-6);
gap: 6px;
line-height: 120%;
}
@ -73,7 +73,7 @@
display: flex;
align-items: center;
width: 100%;
gap: var(--size-10);
gap: 10px;
}
.disabled .setup-feature__icon {
@ -88,7 +88,7 @@
.setup-feature__row {
display: flex;
gap: var(--size-10);
gap: 10px;
align-items: center;
}

10
app/src/lib/components/ShadowLine.svelte
View File

@ -31,20 +31,20 @@
}
.shadow-column {
width: var(--size-16);
width: 16px;
}
.shadow-line {
position: absolute;
width: var(--size-2);
width: 2px;
background-color: var(--clr-commit-shadow);
left: 75%;
bottom: 0;
top: 0;
&.short {
top: calc(var(--avatar-top) + var(--size-4));
top: calc(var(--avatar-top) + 4px);
&.first {
top: calc(var(--avatar-first-top) + var(--size-4));
top: calc(var(--avatar-first-top) + 4px);
}
}
&.dashed {
@ -57,7 +57,7 @@
);
}
&.tip {
bottom: calc(100% - 3.3rem);
bottom: calc(100% - 52px);
}
&.upstream {
background-color: var(--clr-commit-upstream);

8
app/src/lib/components/ShareIssueModal.svelte
View File

@ -229,13 +229,13 @@
.content-wrapper {
display: flex;
flex-direction: column;
gap: 1rem;
gap: 16px;
}
.content-wrapper__section {
display: flex;
flex-direction: column;
gap: var(--size-8);
gap: 8px;
}
.content-wrapper__help-text {
@ -245,12 +245,12 @@
.content-wrapper__checkbox-group {
display: flex;
flex-direction: column;
gap: var(--size-10);
gap: 10px;
}
.content-wrapper__checkbox {
display: flex;
align-items: center;
gap: var(--size-10);
gap: 10px;
}
</style>

5
app/src/lib/components/SnapshotAttachment.svelte
View File

@ -1,5 +1,6 @@
<script lang="ts">
import Icon from './Icon.svelte';
import { pxToRem } from '$lib/utils/pxToRem';
import { onMount } from 'svelte';
export let foldable: boolean = false;
@ -12,7 +13,7 @@
let contentHeight: string;
function setHeight() {
contentHeight = `calc(${el.scrollHeight}px + var(--size-8)`;
contentHeight = `calc(${pxToRem(el.scrollHeight)} + ${pxToRem(8)})`;
}
onMount(() => {
@ -79,7 +80,7 @@
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--size-8);
padding: 8px;
color: var(--clr-text-2);
background-color: var(--clr-bg-1);
border-top: 1px solid var(--clr-border-2);

42
app/src/lib/components/SnapshotCard.svelte
View File

@ -266,8 +266,8 @@
.snapshot-card {
position: relative;
display: flex;
gap: var(--size-12);
padding: var(--size-10) var(--size-14) var(--size-8) var(--size-14);
gap: 12px;
padding: 10px 14px 8px 14px;
overflow: hidden;
background-color: var(--clr-bg-1);
transition: padding 0.2s;
@ -290,7 +290,7 @@
.snapshot-right-container {
display: flex;
justify-content: flex-end;
width: 3.7rem;
width: 60px;
}
.restore-btn {
@ -301,7 +301,7 @@
color: var(--clr-text-2);
text-align: right;
line-height: 1.8;
margin-top: var(--size-2);
margin-top: 2px;
}
.snapshot-line {
@ -309,14 +309,14 @@
display: flex;
align-items: center;
flex-direction: column;
margin-top: 0.188rem;
margin-top: 3px;
&::after {
position: absolute;
top: var(--size-24);
top: 24px;
content: '';
height: calc(100% - var(--size-14));
min-height: var(--size-8);
height: calc(100% - 14px);
min-height: 8px;
width: 1px;
background-color: var(--clr-border-2);
}
@ -329,10 +329,10 @@
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--size-6);
gap: 6px;
min-height: var(--size-tag);
overflow: hidden;
/* padding-bottom: var(--size-4); */
/* padding-bottom: 4px; */
}
.snapshot-details {
@ -340,9 +340,9 @@
width: 100%;
flex-direction: column;
align-items: flex-start;
gap: var(--size-6);
margin-top: var(--size-2);
margin-bottom: var(--size-4);
gap: 6px;
margin-top: 2px;
margin-bottom: 4px;
}
.snapshot-title {
@ -351,7 +351,7 @@
.snapshot-commit-message {
color: var(--clr-text-2);
margin-bottom: var(--size-2);
margin-bottom: 2px;
& span {
color: var(--clr-text-3);
@ -373,8 +373,8 @@
.files-attacment__file {
display: flex;
align-items: center;
gap: var(--size-6);
padding: var(--size-8);
gap: 6px;
padding: 8px;
border-bottom: 1px solid var(--clr-border-3);
&:not(.file-selected):hover {
@ -396,7 +396,7 @@
.files-attacment__file-path-and-name {
display: flex;
gap: var(--size-6);
gap: 6px;
overflow: hidden;
}
@ -415,21 +415,21 @@
}
.files-attacment__file-icon {
width: var(--size-12);
width: 12px;
}
/* ATTACHMENT RESTORE */
.restored-attacment {
display: flex;
padding: var(--size-12);
gap: var(--size-8);
padding: 12px;
gap: 8px;
}
.restored-attacment__content {
display: flex;
flex-direction: column;
gap: var(--size-6);
gap: 6px;
}
.restored-attacment__details {

10
app/src/lib/components/SomethingWentWrong.svelte
View File

@ -27,21 +27,21 @@
<style lang="postcss">
.problem__title {
color: var(--clr-scale-ntrl-30);
margin-bottom: var(--size-12);
margin-bottom: 12px;
}
.problem__switcher {
text-align: right;
margin-top: var(--size-24);
margin-top: 24px;
}
.problem__error {
display: flex;
color: var(--clr-scale-ntrl-0);
gap: var(--size-12);
padding: var(--size-20);
gap: 12px;
padding: 20px;
background-color: var(--clr-theme-err-bg);
border-radius: var(--radius-m);
margin-bottom: var(--size-12);
margin-bottom: 12px;
}
</style>

2
app/src/lib/components/SyncButton.svelte
View File

@ -39,6 +39,6 @@
<style lang="postcss">
.sync-btn__busy-label {
padding-left: var(--size-4);
padding-left: 4px;
}
</style>

4
app/src/lib/components/TextArea.svelte
View File

@ -61,12 +61,12 @@
position: relative;
display: flex;
flex-direction: column;
gap: var(--size-6);
gap: 6px;
}
.textarea {
width: 100%;
resize: none;
padding: var(--size-12);
padding: 12px;
&::-webkit-resizer {
background: transparent;

Some files were not shown because too many files have changed in this diff Show More