-
{#each $notifications as item (item.id)}
-
- {@html logo}
- {#if $state.includes("init-error")}
+ notifications.remove(item.id)} {item} />
{/each}
-{#if $state.includes("settings")}
+{#if $v4state.includes("settings")}
- {#if $state.includes("editor-loading") || $state.includes("fetching")}
+ {#if $v4state.includes("editor-loading") || $v4state.includes("fetching")}
No Item Selected
{/if}
+ {#if sidebarHidden}
+
+ {/if}
{name}
-
- {#if $state.includes("saving")}
+
+ {#if $v4state.includes("saving")}
Saving...
- {:else if $state.includes("trashing")}
+ {:else if $v4state.includes("trashing")}
（◞‸◟）
- {:else if $state.includes("updating")}
+ {:else if $v4state.includes("updating")}
Updating code,
@@ -197,19 +210,19 @@
@@ -233,6 +246,7 @@
flex-grow: 1;
overflow: hidden;
position: relative;
+ width: calc(100svw - var(--sidebar-width));
}
.info {
@@ -241,26 +255,28 @@
}
.editor__empty {
- align-items: center;
background-color: inherit;
color: var(--text-color-disabled);
- display: flex;
font: var(--text-large);
- height: 100%;
- justify-content: center;
- left: 0;
letter-spacing: var(--letter-spacing-large);
+ display: flex;
+ place-content: center;
+ place-items: center;
position: absolute;
- top: 0;
- width: 100%;
- z-index: 85;
+ inset: 0;
+ z-index: 10;
}
.editor__header {
align-items: center;
display: flex;
flex-shrink: 0;
- padding: 1rem 0.5rem 1rem 1.5rem;
+ padding: 1rem;
+ gap: 1rem;
+ }
+
+ .sidebar-switch {
+ scale: 1.5;
}
.editor__header__content {
@@ -311,7 +327,7 @@
}
.editor__footer {
- background: rgba(50 54 57 / 0.65);
+ background: var(--editor-blurred-background);
border-radius: var(--border-radius);
bottom: 0.25rem;
padding: 0.5rem 1rem;
diff --git a/src/ext/extension-page/Components/Editor/EditorSearch.svelte b/src/ext/extension-page/Components/Editor/EditorSearch.svelte
index ad132f0e..6c76e4a6 100644
--- a/src/ext/extension-page/Components/Editor/EditorSearch.svelte
+++ b/src/ext/extension-page/Components/Editor/EditorSearch.svelte
@@ -1,9 +1,9 @@
- {#each groups as group}
+ {#each groups as group (group)}
{/if}
- {#each groupItems(group) as item}
+ {#each groupItems(group) as item (item.name)}
{@const ariaAttributes = {
"aria-labelledby": `${item.name}_label`,
"aria-describedby": `${item.name}_desc`,
@@ -289,7 +289,7 @@
$settings[item.name],
)}
>
- {#each item.values as value}
+ {#each item.values as value (value)}
@@ -346,7 +346,7 @@
style:opacity={gemFocused ? 1 : "revert-layer"}
bind:this={gemRender}
>
- {#each gemParsed.items as p}
+ {#each gemParsed.items as p (p)}
{p.start}{#if p.warn || p.error} :global(svg) {
height: 0.75rem;
width: 0.75rem;
+ stroke: var(--text-color-primary);
}
.textarea_box {
@@ -660,22 +674,10 @@
margin: var(--row-gap) 0;
}
- .textarea mark {
- color: transparent;
- color: var(--text-color-primary);
- background-color: red;
- border-radius: var(--border-radius);
- opacity: 1;
- }
-
- .textarea mark.warn {
- background-color: var(--color-yellow);
- background-color: #808000;
- }
-
+ /* Sync two layers */
.textarea,
textarea {
- background-color: var(--color-black);
+ background-color: var(--color-bg-theme);
border-radius: var(--border-radius);
border: 1px solid transparent;
color: inherit;
@@ -692,7 +694,13 @@
word-break: break-all;
}
+ /* Lower layer */
+ .textarea::-webkit-scrollbar {
+ display: none;
+ }
+
.textarea {
+ /* Text is colored by the upper layer by default */
color: transparent;
overflow: scroll;
user-select: none;
@@ -700,10 +708,20 @@
white-space: pre-wrap;
}
- .textarea::-webkit-scrollbar {
- display: none;
+ .textarea mark {
+ /* Deeper the color of marked text when lose focus */
+ color: var(--text-color-primary);
+ background-color: light-dark(#ffae9e, red);
+ border-radius: var(--border-radius);
+ opacity: 1;
}
+ .textarea mark.warn {
+ background-color: var(--color-yellow);
+ background-color: light-dark(#fff000, #808000);
+ }
+
+ /* Upper layer */
textarea {
background-color: transparent;
position: absolute;
@@ -732,11 +750,13 @@
textarea:focus {
opacity: 1;
+
+ /* Must have color when text selected, otherwise the text will fade */
color: var(--text-color-primary);
}
button.done {
- background: var(--color-black);
+ background-color: var(--color-bg-theme);
border-radius: var(--border-radius);
color: var(--text-color-primary);
font-weight: 600;
@@ -758,7 +778,7 @@
.tools button {
flex: 1;
- background: var(--color-black);
+ background-color: var(--color-bg-theme);
border-radius: var(--border-radius);
color: var(--text-color-primary);
font-weight: 600;
@@ -774,13 +794,13 @@
@media (hover: hover) {
.tools button:hover {
background-color: var(--color-blue);
- color: var(--color-black);
+ color: light-dark(var(--color-white), var(--color-black));
opacity: 1;
}
.tools button.danger:hover {
background: var(--color-red);
- color: var(--text-color-primary);
+ color: var(--color-white);
}
button.reset:hover {
@@ -792,7 +812,7 @@
@supports (-webkit-touch-callout: none) {
.tools button.danger {
background: var(--color-red);
- color: var(--text-color-primary);
+ color: var(--color-white);
}
}
@@ -804,7 +824,7 @@
button.reset {
background: var(--color-red);
border-radius: var(--border-radius);
- color: var(--text-color-primary);
+ color: var(--color-white);
font-weight: 700;
line-height: calc(var(--toggle-font-size) + 0.1rem);
opacity: 0.75;
diff --git a/src/ext/extension-page/Components/Sidebar/Sidebar.svelte b/src/ext/extension-page/Components/Sidebar/Sidebar.svelte
index 69461f77..c5af6b55 100644
--- a/src/ext/extension-page/Components/Sidebar/Sidebar.svelte
+++ b/src/ext/extension-page/Components/Sidebar/Sidebar.svelte
@@ -1,16 +1,17 @@