mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-09-11 12:25:42 +03:00
Replace px with rem (#3998)
* 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:
parent
961edf52c4
commit
1451534b51
@ -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",
|
||||
|
@ -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
|
||||
})
|
||||
]
|
||||
};
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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 {
|
||||
|
@ -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);
|
||||
|
@ -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>
|
||||
|
@ -31,7 +31,7 @@
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--size-12);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.title {
|
||||
|
@ -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>
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
|
@ -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 {
|
||||
|
@ -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 {
|
||||
|
@ -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%;
|
||||
|
@ -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>
|
||||
|
@ -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);
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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%;
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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 {
|
||||
|
@ -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);
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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 {
|
||||
|
@ -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>
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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>
|
||||
|
@ -167,7 +167,7 @@
|
||||
.options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--size-8);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.api-link {
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
@ -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 {
|
||||
|
@ -131,7 +131,7 @@
|
||||
display: flex;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
gap: var(--size-8);
|
||||
gap: 8px;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
&:last-child {
|
||||
|
@ -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>
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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 {
|
||||
|
@ -55,7 +55,7 @@
|
||||
.dropzone-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--size-6);
|
||||
gap: 6px;
|
||||
color: var(--clr-scale-pop-40);
|
||||
}
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -42,7 +42,7 @@
|
||||
.file-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--size-4);
|
||||
gap: 4px;
|
||||
}
|
||||
.file-status__icons {
|
||||
display: flex;
|
||||
|
@ -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 {
|
||||
|
@ -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);
|
||||
|
@ -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 {
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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 {
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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 {
|
||||
|
@ -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 */
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -129,6 +129,6 @@
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--size-8);
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
|
@ -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>
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -63,7 +63,7 @@
|
||||
|
||||
<style lang="postcss">
|
||||
.actions {
|
||||
margin-top: var(--size-20);
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
@ -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>
|
||||
|
@ -64,7 +64,7 @@
|
||||
.project-switcher {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--size-10);
|
||||
gap: 10px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
@ -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 */
|
||||
|
@ -78,6 +78,6 @@
|
||||
|
||||
<style lang="postcss">
|
||||
.message {
|
||||
padding-bottom: var(--size-12);
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
|
@ -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>
|
||||
|
@ -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 {
|
||||
|
@ -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>
|
||||
|
@ -60,7 +60,7 @@
|
||||
.remove-project-description {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--size-8);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.details-text {
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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);
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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);
|
||||
|
@ -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>
|
||||
|
@ -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);
|
||||
|
@ -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 {
|
||||
|
@ -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>
|
||||
|
@ -39,6 +39,6 @@
|
||||
|
||||
<style lang="postcss">
|
||||
.sync-btn__busy-label {
|
||||
padding-left: var(--size-4);
|
||||
padding-left: 4px;
|
||||
}
|
||||
</style>
|
||||
|
@ -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
Loading…
Reference in New Issue
Block a user