From 9f1ea568321db502cbe1995c213bd73a9afde4c9 Mon Sep 17 00:00:00 2001 From: Sylvain Lesage Date: Tue, 6 Jan 2026 10:21:29 +0100 Subject: [PATCH 1/2] move fonts as assets, so that npm run dev has fonts too --- .../assets}/fonts/BerkeleyMono-Bold.woff2 | Bin .../assets}/fonts/BerkeleyMono-BoldItalic.woff2 | Bin .../assets}/fonts/BerkeleyMono-Italic.woff2 | Bin .../assets}/fonts/BerkeleyMono-Regular.woff2 | Bin .../assets}/fonts/IBMPlexSans-Latin.woff2 | Bin .../assets}/fonts/IBMPlexSans-LatinExt.woff2 | Bin src/styles/fonts.css | 12 ++++++------ 7 files changed, 6 insertions(+), 6 deletions(-) rename {public => src/assets}/fonts/BerkeleyMono-Bold.woff2 (100%) rename {public => src/assets}/fonts/BerkeleyMono-BoldItalic.woff2 (100%) rename {public => src/assets}/fonts/BerkeleyMono-Italic.woff2 (100%) rename {public => src/assets}/fonts/BerkeleyMono-Regular.woff2 (100%) rename {public => src/assets}/fonts/IBMPlexSans-Latin.woff2 (100%) rename {public => src/assets}/fonts/IBMPlexSans-LatinExt.woff2 (100%) diff --git a/public/fonts/BerkeleyMono-Bold.woff2 b/src/assets/fonts/BerkeleyMono-Bold.woff2 similarity index 100% rename from public/fonts/BerkeleyMono-Bold.woff2 rename to src/assets/fonts/BerkeleyMono-Bold.woff2 diff --git a/public/fonts/BerkeleyMono-BoldItalic.woff2 b/src/assets/fonts/BerkeleyMono-BoldItalic.woff2 similarity index 100% rename from public/fonts/BerkeleyMono-BoldItalic.woff2 rename to src/assets/fonts/BerkeleyMono-BoldItalic.woff2 diff --git a/public/fonts/BerkeleyMono-Italic.woff2 b/src/assets/fonts/BerkeleyMono-Italic.woff2 similarity index 100% rename from public/fonts/BerkeleyMono-Italic.woff2 rename to src/assets/fonts/BerkeleyMono-Italic.woff2 diff --git a/public/fonts/BerkeleyMono-Regular.woff2 b/src/assets/fonts/BerkeleyMono-Regular.woff2 similarity index 100% rename from public/fonts/BerkeleyMono-Regular.woff2 rename to src/assets/fonts/BerkeleyMono-Regular.woff2 diff --git a/public/fonts/IBMPlexSans-Latin.woff2 b/src/assets/fonts/IBMPlexSans-Latin.woff2 similarity index 100% rename from public/fonts/IBMPlexSans-Latin.woff2 rename to src/assets/fonts/IBMPlexSans-Latin.woff2 diff --git a/public/fonts/IBMPlexSans-LatinExt.woff2 b/src/assets/fonts/IBMPlexSans-LatinExt.woff2 similarity index 100% rename from public/fonts/IBMPlexSans-LatinExt.woff2 rename to src/assets/fonts/IBMPlexSans-LatinExt.woff2 diff --git a/src/styles/fonts.css b/src/styles/fonts.css index 8779d41..3ab19e8 100644 --- a/src/styles/fonts.css +++ b/src/styles/fonts.css @@ -1,27 +1,27 @@ @font-face { font-family: 'Berkeley Mono'; - src: local('Berkeley Mono'), url('/fonts/BerkeleyMono-Regular.woff2') format('woff2'); + src: local('Berkeley Mono'), url('../assets/fonts/BerkeleyMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Berkeley Mono'; - src: local('Berkeley Mono'),url('/fonts/BerkeleyMono-Bold.woff2') format('woff2'); + src: local('Berkeley Mono'),url('../assets/fonts/BerkeleyMono-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Berkeley Mono'; - src: local('Berkeley Mono'),url('/fonts/BerkeleyMono-Italic.woff2') format('woff2'); + src: local('Berkeley Mono'),url('../assets/fonts/BerkeleyMono-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Berkeley Mono'; - src: local('Berkeley Mono'),url('/fonts/BerkeleyMono-BoldItalic.woff2') format('woff2'); + src: local('Berkeley Mono'),url('../assets/fonts/BerkeleyMono-BoldItalic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; @@ -33,7 +33,7 @@ font-style: normal; font-weight: 400; font-stretch: 100%; - src: local('IBM Plex Sans'), url('/fonts/IBMPlexSans-LatinExt.woff2') format('woff2'); + src: local('IBM Plex Sans'), url('../assets/fonts/IBMPlexSans-LatinExt.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @@ -42,7 +42,7 @@ font-style: normal; font-weight: 400; font-stretch: 100%; - src: local('IBM Plex Sans'), url('/fonts/IBMPlexSans-Latin.woff2') format('woff2'); + src: local('IBM Plex Sans'), url('../assets/fonts/IBMPlexSans-Latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } From 426fe9f5f0ab05ddbe9af85528b74d1def3e7c29 Mon Sep 17 00:00:00 2001 From: Sylvain Lesage Date: Tue, 6 Jan 2026 14:56:25 +0100 Subject: [PATCH 2/2] adapt style to mimic source.coop --- src/styles/colors.css | 6 ++- src/styles/hightable.css | 84 +++++++++++++++++++++++------- src/styles/index.css | 109 +++++---------------------------------- 3 files changed, 84 insertions(+), 115 deletions(-) diff --git a/src/styles/colors.css b/src/styles/colors.css index 3cbe9ec..5a7e6bb 100644 --- a/src/styles/colors.css +++ b/src/styles/colors.css @@ -14,12 +14,14 @@ --gray-10: #838383; --gray-11: #646464; --gray-12: #202020; + + --gray-a11: #0000009b; } @media (prefers-color-scheme: dark) { :root { --black: #ffffff; - --white: #000000; --gray-1: #111111; + --white: var(--gray-1);/* #000000; */ --gray-2: #191919; --gray-3: #222222; --gray-4: #2a2a2a; @@ -31,5 +33,7 @@ --gray-10: #7b7b7b; --gray-11: #b4b4b4; --gray-12: #eeeeee; + + --gray-a11: #ffffffaf; } } diff --git a/src/styles/hightable.css b/src/styles/hightable.css index 7925aa6..2313065 100644 --- a/src/styles/hightable.css +++ b/src/styles/hightable.css @@ -1,23 +1,71 @@ /* Theme for hightable */ .hightable { - --hy-color-1: var(--black); - --hy-color-2: var(--gray-12); - --hy-color-3: var(--gray-11); - --hy-color-5: var(--gray-10); - --hy-color-7: var(--gray-9); - --hy-color-8: var(--gray-7); - --hy-color-9: var(--gray-2); - --hy-color-10: var(--gray-1); - - --hy-accent-1: var(--gray-12); - --hy-accent-2: var(--gray-11); - --hy-accent-3: var(--gray-8); - --hy-accent-4: var(--gray-4); - --hy-accent-5: var(--gray-3); - - --hy-highlight-1: var(--gray-3); - --hy-highlight-2: var(--gray-2); - + /* texts */ + --header-color: var(--gray-12); + --menu-color: var(--gray-12); + --menu-item-color: var(--gray-12); + --menu-button-color: var(--gray-12); + --text-color: var(--gray-12); + --primary-sort-icon-color: inherit; + + --row-number-color: var(--gray-a11); + + --secondary-sort-icon-color: var(--gray-5); + + /* backgrounds */ + --background-color: var(--white); + --menu-item-background-color: var(--white); + + --header-background-color: var(--gray-2); + --focusable-background-color: var(--gray-2); + --menu-button-hovered-background-color: var(--gray-2); + --menu-button-focused-background-color: var(--gray-2); + --row-hovered-background-color: var(--gray-2); + + --menu-background-color: var(--gray-2); + --menu-button-background-color: var(--gray-2); + --menu-item-hovered-background-color: var(--gray-2); + --row-number-background-color: var(--gray-2); + --corner-cell-background-color: var(--gray-2); + --row-selected-background-color: var(--gray-2); + + --focus-background-color: var(--gray-3); + --row-number-hovered-background-color: var(--gray-3); + --row-number-selected-background-color: var(--gray-3); + + --resize-indicator-background-color: var(--gray-12); + + /* borders */ + --cell-border-color: var(--gray-5); + --cell-hovered-right-border-color: var(--gray-5); + --header-bottom-border-color: var(--gray-5); + --menu-border-color: var(--gray-5); + --menu-inner-border-color: var(--gray-5); + --row-number-hovered-right-border-color: var(--gray-5); + --corner-cell-right-border-color: var(--gray-5); + --row-number-right-border-color : var(--gray-5); + + --top-border-color: var(--gray-12); + --focus-border-color: var(--gray-12); + --focusable-border-color: var(--gray-12); + --resizer-hovered-right-border-color: var(--gray-12); + + --top-border-height: 1px; + --focus-border-width: 1px; + + /* other tweaks */ + thead { + th { + border-bottom-width: 1px; + [role="spinbutton"]:focus, [role="spinbutton"]:hover { + margin: 0; + } + } + td:first-child { + box-shadow: none; + } + } + tbody { [role="rowheader"] { text-align: right; diff --git a/src/styles/index.css b/src/styles/index.css index 82ad7ab..d291e98 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -27,20 +27,6 @@ h2 { p { margin: 15px 0; } -code { - font-family: var(--code-font-family); - padding: 10px; - white-space: pre-wrap; - word-break: break-all; -} -sub { - align-items: center; - display: flex; - gap: 5px; -} -sub img { - cursor: pointer; -} /* dropzone */ .dropzone { @@ -53,7 +39,8 @@ sub img { } .overlay { font-size: 125%; - position: fixed; + justify-content: center; + position: absolute; top: 0; bottom: 0; right: 0; @@ -75,12 +62,19 @@ sub img { width: 100%; } +/* file upload */ +input[type="file"] { + display: none; +} + /* content area */ main { display: flex; flex-direction: column; flex: 1; min-width: 0; + color: var(--gray-12); + background: var(--gray-1); } #app { @@ -107,8 +101,7 @@ main { .top-header { align-items: center; - border-bottom: 1px solid #ddd; - background: #eee; + border-bottom: 1px solid var(--gray-5); display: flex; font-family: var(--code-font-family); font-size: 16px; @@ -123,8 +116,7 @@ main { .view-header { align-items: center; - background-color: #f2f2f2; - color: #444; + color: var(--gray-11); display: flex; gap: 16px; height: 24px; @@ -133,13 +125,6 @@ main { text-overflow: ellipsis; white-space: nowrap; } -.viewer { - display: flex; - flex: 1; - flex-direction: column; - white-space: pre-wrap; - overflow-y: auto; -} /* welcome */ #welcome { @@ -176,7 +161,6 @@ main { display: flex; min-width: 0; border: 1px solid var(--gray-5); - background: var(--gray-1); a { text-decoration: none; @@ -185,11 +169,11 @@ main { } } &:hover { - border-color: var(--accent-8); + border-color: var(--gray-12); } } .quick-links a { - color: var(--accent-11); + color: var(--gray-12); overflow: hidden; padding: 12px; padding-left: 36px; @@ -198,67 +182,6 @@ main { width: 100%; } -/* file upload */ -input[type="file"] { - display: none; -} -.overlay { - font-size: 125%; - justify-content: center; - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - background-color: rgba(240, 240, 240, 0.6); - backdrop-filter: blur(4px); - display: none; - padding: 12px; - z-index: 40; -} -.over .overlay { - display: flex; -} - -/* layout */ -.layout { - margin: 10px; - max-width: 480px; -} -.layout .group, -.layout .cell { - background-color: rgba(100, 100, 100, 0.05); - border: 1px solid #ccc; - font-size: 12px; - padding: 4px 20px; - margin-top: 8px; - word-break: break-all; -} -.cell, -.group-header { - display: flex; -} -.group-header > label, -.cell > label { - display: flex; - flex: 1; - font-size: 12px; - font-weight: normal; - justify-content: flex-start; -} -.group-header > span { - font-size: 10px; -} - -.layout div ul { - list-style: none; -} -.layout div li { - font-size: 10px; - padding: 2px 4px; - text-align: right; -} - .loading { align-items: center; display: flex; @@ -269,9 +192,3 @@ input[type="file"] { .loading::after { content: "Loading…"; } - -.json { - background-color: #22222b; - padding-left: 20px; -} -