chris/calque
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

much better!

Browse source
This commit is contained in:
Chris Kruining 2024-11-28 08:31:31 +01:00
parent 76c5de5c32
commit bfb668a164
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
14 changed files with 93 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/routes/(editor)/edit.module.css
View file

@ -6,9 +6,8 @@
& .sidebar {
z-index: 1;
padding: var(--padding-l);
padding-block-start: calc(2 * var(--padding-l));
background-color: var(--surface-2);
padding: var(--padding-xl);
background-color: var(--surface-300);
& > ul {
padding: 0;
@ -16,6 +15,15 @@
}
}
& .content {
background-color: var(--surface-500);
border-top-left-radius: var(--radii-xl);
& > header {
padding-inline-start: var(--padding-l);
}
}
:is(details, div):has(.mutated) > :is(summary, span:has(.mutated)) {
color: var(--warn);
@ -37,11 +45,11 @@
& > svg {
padding-inline-end: 3em;
margin-inline-end: 3em;
border-inline-end: 2px solid var(--surface-5);
border-inline-end: 2px solid var(--surface-300);
}
& > button {
background-color: var(--surface-4);
background-color: var(--surface-400);
color: var(--text-1);
padding: var(--padding-l) var(--padding-xl);
border: none;

2
src/routes/(editor)/edit.tsx
View file

@ -317,7 +317,7 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
] as const}</Tree>
</Sidebar>
<Tabs active={setActive} onClose={commands.closeTab}>
<Tabs class={css.content} active={setActive} onClose={commands.closeTab}>
<For each={tabs()}>{
({ key, handle, setApi, setEntries }) => <Tab
id={key}

19
src/routes/editor.module.css
View file

@ -4,12 +4,12 @@
inline-size: 100%;
block-size: 100%;
overflow: clip;
background-color: var(--surface-1);
background-color: var(--surface-300);
.menu {
view-transition-name: menu;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid: 100% / auto minmax(0, 1fr) auto;
grid-auto-flow: column;
justify-content: start;
place-items: center start;
@ -18,11 +18,11 @@
gap: .5em;
padding-inline: 1em;
block-size: calc(env(titlebar-area-height, 2em) + .5px);
block-size: calc(env(titlebar-area-height, 3em) + .5px);
inline-size: env(titlebar-area-width, 100%);
-webkit-app-region: drag;
background-color: var(--surface-3);
background-color: var(--surface-300);
color: var(--text-1);
& > * {
@ -30,19 +30,14 @@
}
& > .logo {
inline-size: 3em;
block-size: 3em;
padding: .5em;
margin-block-end: -1em;
background-color: inherit;
color: inherit;
border-radius: .25em;
aspect-ratio: 1;
block-size: 100%;
padding: var(--padding-m);
& > picture {
display: contents;
& > img {
inline-size: 100%;
block-size: 100%;
}
}