mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-11-28 04:47:42 +03:00
Refactor CSS styles and clean up code
The diff is mainly focused on updating the styling of the input fields, changing some class names, and removing extra spacing or unnecessary lines. Changes include: - Reformatting textarea and input element styling by breaking selectors into multiple lines for better readability. - Updating input focus styles in `CommandPalette/Commit.svelte` to remove duplicate classes. - Adjusting padding and margins for elements in `FileActivity.svelte` and `+page.svelte` for improved appearance and alignment. - Tweaking and simplifying class names in `+page.svelte` for consistency and readability.
This commit is contained in:
parent
f51757372f
commit
f17255d4e0
@ -3,7 +3,6 @@
|
|||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
|
|
||||||
/* Boilerplate CSS */
|
/* Boilerplate CSS */
|
||||||
a,
|
a,
|
||||||
button {
|
button {
|
||||||
@ -14,14 +13,16 @@ button {
|
|||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea, input {
|
textarea,
|
||||||
|
input {
|
||||||
@apply rounded border border-zinc-600 bg-zinc-700 p-2 text-zinc-100;
|
@apply rounded border border-zinc-600 bg-zinc-700 p-2 text-zinc-100;
|
||||||
}
|
}
|
||||||
textarea:focus, input:focus{
|
textarea:focus,
|
||||||
|
input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
@apply hover:border-zinc-500/80;
|
@apply hover:border-zinc-500/80;
|
||||||
@apply focus:ring-2 focus:ring-blue-600/30;
|
@apply focus:ring-2 focus:ring-blue-600/30;
|
||||||
@apply focus:focus:border-blue-600 focus:border-[1px];
|
@apply focus:border-[1px] focus:focus:border-blue-600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.drag-none {
|
.drag-none {
|
||||||
|
@ -94,7 +94,7 @@
|
|||||||
<fieldset class="flex flex-auto transform flex-col gap-2 overflow-auto transition-all">
|
<fieldset class="flex flex-auto transform flex-col gap-2 overflow-auto transition-all">
|
||||||
{#if $statuses.length > 0}
|
{#if $statuses.length > 0}
|
||||||
<input
|
<input
|
||||||
class="ring-gray-600 block w-full rounded-md border-0 p-4 text-zinc-200 ring-1 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-100 sm:py-1.5 sm:text-sm sm:leading-6"
|
class="ring-gray-600 focus:ring-blue-100 block w-full rounded-md border-0 p-4 text-zinc-200 ring-1 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-inset sm:py-1.5 sm:text-sm sm:leading-6"
|
||||||
type="text"
|
type="text"
|
||||||
name="summary"
|
name="summary"
|
||||||
placeholder="Summary (required)"
|
placeholder="Summary (required)"
|
||||||
@ -107,7 +107,7 @@
|
|||||||
name="description"
|
name="description"
|
||||||
placeholder="Description (optional)"
|
placeholder="Description (optional)"
|
||||||
bind:value={description}
|
bind:value={description}
|
||||||
class="ring-gray-600 block w-full rounded-md border-0 p-4 text-zinc-200 ring-1 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-100 sm:py-1.5 sm:text-sm sm:leading-6"
|
class="ring-gray-600 focus:ring-blue-100 block w-full rounded-md border-0 p-4 text-zinc-200 ring-1 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-inset sm:py-1.5 sm:text-sm sm:leading-6"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{#if isCommitting}
|
{#if isCommitting}
|
||||||
|
@ -40,7 +40,7 @@
|
|||||||
|
|
||||||
<style>
|
<style>
|
||||||
.file-activity {
|
.file-activity {
|
||||||
@apply flex h-full items-baseline gap-1 pt-2 pl-1 pr-1;
|
@apply flex h-full items-baseline gap-1 px-4 pt-2;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
border-bottom: 1px solid rgb(55, 55, 55);
|
border-bottom: 1px solid rgb(55, 55, 55);
|
||||||
background-color: rgba(0, 0, 0, 0.1);
|
background-color: rgba(0, 0, 0, 0.1);
|
||||||
|
@ -128,7 +128,7 @@
|
|||||||
|
|
||||||
<form on:submit|preventDefault={onCommit} class="flex w-1/3 min-w-[500px] flex-col gap-4">
|
<form on:submit|preventDefault={onCommit} class="flex w-1/3 min-w-[500px] flex-col gap-4">
|
||||||
<ul class="flex w-full flex-col rounded border border-gb-700 bg-card-default pb-1">
|
<ul class="flex w-full flex-col rounded border border-gb-700 bg-card-default pb-1">
|
||||||
<header class="flex w-full items-center p-2 bg-card-active">
|
<header class="flex w-full items-center bg-card-active p-2">
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
class="h-[15px] w-[15px] cursor-default disabled:opacity-50"
|
class="h-[15px] w-[15px] cursor-default disabled:opacity-50"
|
||||||
@ -145,14 +145,11 @@
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
{#each $statuses as { path, staged }, i}
|
{#each $statuses as { path, staged }, i}
|
||||||
<li
|
<li class="bg-card-default ">
|
||||||
class="bg-card-default "
|
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class:bg-gb-700={$selectedDiffPath === path}
|
class:bg-gb-700={$selectedDiffPath === path}
|
||||||
class:hover:bg-divider={$selectedDiffPath !== path}
|
class:hover:bg-divider={$selectedDiffPath !== path}
|
||||||
|
class="file-changed-item mx-1 mt-1 flex cursor-text select-text items-center gap-2 rounded bg-card-default px-1 py-2"
|
||||||
class="file-changed-item flex cursor-text select-text items-center gap-2 bg-card-default px-1 py-2 mx-1 mt-1 rounded"
|
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
class="h-[15px] w-[15px] cursor-default disabled:opacity-50"
|
class="h-[15px] w-[15px] cursor-default disabled:opacity-50"
|
||||||
@ -190,8 +187,8 @@
|
|||||||
class="
|
class="
|
||||||
w-full rounded border border-zinc-600 bg-zinc-700 p-2 text-zinc-100
|
w-full rounded border border-zinc-600 bg-zinc-700 p-2 text-zinc-100
|
||||||
hover:border-zinc-500/80
|
hover:border-zinc-500/80
|
||||||
|
focus:border-[1px] focus:focus:border-blue-600
|
||||||
focus:ring-2 focus:ring-blue-600/30
|
focus:ring-2 focus:ring-blue-600/30
|
||||||
focus:focus:border-blue-600 focus:border-[1px]
|
|
||||||
"
|
"
|
||||||
disabled={isGeneratingCommitMessage || isCommitting}
|
disabled={isGeneratingCommitMessage || isCommitting}
|
||||||
type="text"
|
type="text"
|
||||||
@ -221,8 +218,8 @@
|
|||||||
class="
|
class="
|
||||||
w-full rounded border border-zinc-600 bg-zinc-700 p-2 text-zinc-100
|
w-full rounded border border-zinc-600 bg-zinc-700 p-2 text-zinc-100
|
||||||
hover:border-zinc-500/80
|
hover:border-zinc-500/80
|
||||||
|
focus:border-[1px] focus:focus:border-blue-600
|
||||||
focus:ring-2 focus:ring-blue-600/30
|
focus:ring-2 focus:ring-blue-600/30
|
||||||
focus:focus:border-blue-600 focus:border-[1px]
|
|
||||||
"
|
"
|
||||||
rows="10"
|
rows="10"
|
||||||
placeholder="Description (optional)"
|
placeholder="Description (optional)"
|
||||||
|
Loading…
Reference in New Issue
Block a user