refac: styling

This commit is contained in:
Timothy Jaeryang Baek 2025-09-03 18:37:25 +04:00
parent 5a596ae40c
commit 926954f93b
2 changed files with 14 additions and 6 deletions

View file

@ -282,6 +282,14 @@ input[type='number'] {
outline: none; outline: none;
} }
.cm-gutters {
@apply !bg-white dark:!bg-black !border-none;
}
.cm-editor {
@apply bg-white dark:bg-black;
}
.tippy-box[data-theme~='dark'] { .tippy-box[data-theme~='dark'] {
@apply rounded-lg bg-gray-950 text-xs border border-gray-900 shadow-xl; @apply rounded-lg bg-gray-950 text-xs border border-gray-900 shadow-xl;
} }

View file

@ -437,7 +437,7 @@
> >
<div class="flex items-center gap-0.5 translate-y-[1px]"> <div class="flex items-center gap-0.5 translate-y-[1px]">
<button <button
class="flex gap-1 items-center bg-none border-none bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-md px-1.5 py-0.5" class="flex gap-1 items-center bg-none border-none bg-gray-50 dark:bg-black transition rounded-md px-1.5 py-0.5"
on:click={collapseCodeBlock} on:click={collapseCodeBlock}
> >
<div class=" -translate-y-[0.5px]"> <div class=" -translate-y-[0.5px]">
@ -451,7 +451,7 @@
{#if preview && ['html', 'svg'].includes(lang)} {#if preview && ['html', 'svg'].includes(lang)}
<button <button
class="flex gap-1 items-center run-code-button bg-none border-none bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-md px-1.5 py-0.5" class="flex gap-1 items-center run-code-button bg-none border-none bg-gray-50 dark:bg-black transition rounded-md px-1.5 py-0.5"
on:click={previewCode} on:click={previewCode}
> >
<div class=" -translate-y-[0.5px]"> <div class=" -translate-y-[0.5px]">
@ -471,7 +471,7 @@
</div> </div>
{:else if run} {:else if run}
<button <button
class="flex gap-1 items-center run-code-button bg-none border-none bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-md px-1.5 py-0.5" class="flex gap-1 items-center run-code-button bg-none border-none bg-gray-50 dark:bg-black transition rounded-md px-1.5 py-0.5"
on:click={async () => { on:click={async () => {
code = _code; code = _code;
await tick(); await tick();
@ -491,7 +491,7 @@
{#if save} {#if save}
<button <button
class="save-code-button bg-none border-none bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-md px-1.5 py-0.5" class="save-code-button bg-none border-none bg-gray-50 dark:bg-black transition rounded-md px-1.5 py-0.5"
on:click={saveCode} on:click={saveCode}
> >
{saved ? $i18n.t('Saved') : $i18n.t('Save')} {saved ? $i18n.t('Saved') : $i18n.t('Save')}
@ -499,7 +499,7 @@
{/if} {/if}
<button <button
class="copy-code-button bg-none border-none bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-md px-1.5 py-0.5" class="copy-code-button bg-none border-none bg-gray-50 dark:bg-black transition rounded-md px-1.5 py-0.5"
on:click={copyCode}>{copied ? $i18n.t('Copied') : $i18n.t('Copy')}</button on:click={copyCode}>{copied ? $i18n.t('Copied') : $i18n.t('Copy')}</button
> >
</div> </div>
@ -512,7 +512,7 @@
? '' ? ''
: 'rounded-b-lg'} overflow-hidden" : 'rounded-b-lg'} overflow-hidden"
> >
<div class=" pt-7 bg-gray-50 dark:bg-gray-850"></div> <div class=" pt-7 bg-gray-50 dark:bg-black"></div>
{#if !collapsed} {#if !collapsed}
{#if edit} {#if edit}