radicle/radicle-explorer
1
0
Fork 0
mirror of https://seed.radicle.dev/rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5.git synced 2026-11-16 03:40:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add theme switching button

Browse Source 
Co-authored-by: Brandon Oxendine <brandon.oxendine@gmail.com>
Signed-off-by: Brandon Oxendine <brandon.oxendine@gmail.com>
Signed-off-by: Rūdolfs Ošiņš <rudolfs@osins.org>
This commit is contained in:
Rūdolfs Ošiņš
2022-09-15 12:45:56 +02:00
co-authored by Brandon Oxendine
parent 7a39306622
commit b35d46752f
56 changed files with 703 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+2
View File
@@ -16,6 +16,8 @@
<meta property="og:image:height" content="240" />
<meta property="og:type" content="website" />
<link rel="stylesheet" type="text/css" href="/typography.css" />
<link rel="stylesheet" type="text/css" href="/colors.css" />
<link rel="stylesheet" type="text/css" href="/elevations.css" />
<link rel="stylesheet" type="text/css" href="/index.css" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="/favicon.ico" />
public/colors.css
+119
View File
@@ -0,0 +1,119 @@
:root {
--color-primary: #ff55ff;
--color-primary-1: #ff55ff09;
--color-primary-2: #ff55ff11;
--color-primary-3: #ff55ff22;
--color-primary-4: #ff55ff33;
--color-primary-5: #ff55ff77;
--color-primary-6: hsl(300, 100%, 90%);
--color-secondary: #5555ff;
--color-secondary-1: #5555ff09;
--color-secondary-2: #5555ff11;
--color-secondary-3: #5555ff22;
--color-secondary-4: #5555ff33;
--color-secondary-5: #5555ff77;
--color-secondary-6: hsl(240, 100%, 90%);
--color-tertiary: #55ffff;
--color-tertiary-1: #55ffff09;
--color-tertiary-2: #55ffff11;
--color-tertiary-3: #55ffff22;
--color-tertiary-4: #55ffff33;
--color-tertiary-5: #55ffff77;
--color-tertiary-6: #abf9f9;
--color-caution: #ffff99;
--color-caution-1: #ffff9909;
--color-caution-2: #ffff9911;
--color-caution-3: #ffff9922;
--color-caution-4: #ffff9933;
--color-caution-5: #ffff9977;
--color-caution-6: hsl(60, 100%, 90%);
--color-positive: #53db53;
--color-positive-1: #53db5309;
--color-positive-2: #53db5311;
--color-positive-3: #53db5322;
--color-positive-4: #53db5333;
--color-positive-5: #53db5377;
--color-positive-6: hsl(120, 100%, 90%);
--color-negative: #ff5555;
--color-negative-1: #ff555509;
--color-negative-2: #ff555511;
--color-negative-3: #ff555522;
--color-negative-4: #ff555533;
--color-negative-5: #ff555577;
--color-negative-6: hsl(0, 100%, 90%);
--color-foreground: #ffffff;
--color-foreground-1: #121a21;
--color-foreground-2: #181f28;
--color-foreground-3: #212832;
--color-foreground-4: #2b313d;
--color-foreground-5: #585c6f;
--color-foreground-6: #c2c3d4;
--color-background: #0b131a;
}
[data-theme="light"] {
--color-primary: #ff55ff;
--color-primary-1: #ff55ff30;
--color-primary-2: #ff55ff45;
--color-primary-3: #ff55ff60;
--color-primary-4: #ff55ff80;
--color-primary-5: #ff55ffaa;
--color-primary-6: hsl(300, 40%, 30%);
--color-secondary: #5555ff;
--color-secondary-1: #5555ff10;
--color-secondary-2: #5555ff20;
--color-secondary-3: #5555ff60;
--color-secondary-4: #5555ff80;
--color-secondary-5: #5555ffaa;
--color-secondary-6: hsl(240, 40%, 30%);
--color-tertiary: #2ed4c1;
--color-tertiary-1: #2ed4c120;
--color-tertiary-2: #2ed4c140;
--color-tertiary-3: #2ed4c160;
--color-tertiary-4: #2ed4c180;
--color-tertiary-5: #2ed4c1aa;
--color-tertiary-6: #005050;
--color-caution: hsl(60, 100%, 30%);
--color-caution-1: #d3d34d20;
--color-caution-2: #d3d34d40;
--color-caution-3: #d3d34d60;
--color-caution-4: #d3d34d80;
--color-caution-5: #d3d34daa;
--color-caution-6: hsl(60, 82%, 22%);
--color-positive: #53db53;
--color-positive-1: #53db5320;
--color-positive-2: #53db5340;
--color-positive-3: #53db5360;
--color-positive-4: #53db5380;
--color-positive-5: #53db53aa;
--color-positive-6: hsl(120, 40%, 30%);
--color-negative: #ff5555;
--color-negative-1: #ff555520;
--color-negative-2: #ff555540;
--color-negative-3: #ff555560;
--color-negative-4: #ff555580;
--color-negative-5: #ff5555aa;
--color-negative-6: hsl(0, 40%, 30%);
--color-foreground: #1a1a2c;
--color-foreground-1: #ebecf8;
--color-foreground-2: #e3e3f3;
--color-foreground-3: #d2d2e8;
--color-foreground-4: #9b9bc0;
--color-foreground-5: #6f6f8a;
--color-foreground-6: #42425a;
--color-background: #f3f6fd;
}
public/elevations.css
+11
View File
@@ -0,0 +1,11 @@
:root {
--elevation-low: 0px 16px 32px 32px #00000070;
--elevation-high: 0px 8px 64px var(--color-secondary-5);
--elevation-high-negative: 0px 8px 64px var(--color-negative-5);
}
[data-theme="light"] {
--elevation-low: 0px 16px 32px 16px #00000020;
--elevation-high: 0px 8px 64px var(--color-secondary-5);
--elevation-high-negative: 0px 8px 64px var(--color-negative-5);
}
public/index.css
+26 -80
View File
@@ -4,74 +4,9 @@
}
:root {
--color-primary: #ff55ff;
--color-primary-1: #382847;
--color-primary-2: #62326d;
--color-primary-5: #dd44dd;
--color-primary-6: #ffd4ff;
--color-primary-faded: #ff55ff77;
--color-primary-background: #ff55ff11;
--color-primary-background-lighter: #ff55ff22;
--color-secondary: #5555ff;
--color-secondary-background: #5555ff11;
--color-secondary-background-darker: #5555ff09;
--color-secondary-faded: #5555ff77;
--color-secondary-darker: #4343cc;
--color-secondary-1: #212847;
--color-secondary-2: #2c326d;
--color-secondary-6: #e3e3ff;
--color-tertiary: #55ffff;
--color-tertiary-faded: #ade4e4;
--color-tertiary-background: #55ffff11;
--color-tertiary-1: #214047;
--color-tertiary-2: #2c326d;
--color-tertiary-6: #e3e3ff;
--color-light: #add0e4;
--color-yellow: #ffff99;
--color-yellow-background: #ffff9911;
--color-yellow-background-solid: #222929;
--color-yellow-background-lighter: #ffff9922;
--color-positive: #53db53;
--color-positive-background: #53db5311;
--color-positive-1: #11332b;
--color-positive-2: #2c6837;
--color-positive-6: #e3ffe3;
--color-caution: #ffc555;
--color-caution-1: #2f312d;
--color-caution-2: #524a34;
--color-caution-6: #ffefcf;
--color-negative: #ff5555;
--color-negative-background: #ff555511;
--color-negative-1: #35202b;
--color-negative-2: #623237;
--color-negative-6: #ffd4d4;
--color-foreground: #ffffff;
--color-foreground-90: #ddddee;
--color-foreground-80: #aaaab6;
--color-foreground-70: #9999aa;
--color-foreground-faded: #777788;
--color-foreground-subtle: #444455;
--color-foreground-subtler: #333344;
--color-foreground-even-subtler: #292936;
--color-foreground-background: #121a21;
--color-foreground-background-subtle: #10171e;
--color-foreground-background-lighter: #151f24;
--color-foreground-1: #242e38;
--color-foreground-2: #29343d;
--color-foreground-3: #333e47;
--color-foreground-4: #5e6d7a;
--color-foreground-5: #8594a1;
--color-foreground-6: #d3dee8;
--color-background: #0b131a;
--color-shadow: rgba(0, 0, 0, 0.2);
--color-glow: #5555ff22;
--color-glow-error: #ff555522;
--color-scrollbar: var(--color-foreground-subtler);
--border-radius: 0.75rem;
--border-radius-small: 0.5rem;
--border-radius-round: 10rem;
--box-shadow-color: var(--color-secondary-2);
--content-max-width: 1920px;
--content-min-width: 480px;
@@ -81,6 +16,22 @@
--button-regular-height: 2.5rem;
--button-small-height: 2rem;
--button-tiny-height: 1.5rem;
--glow: var(--color-secondary-3);
--glow-error: var(--color-negative-3);
--header-gradient: linear-gradient(
180deg,
var(--color-secondary-3) 0%,
transparent 100%
);
}
[data-theme="light"] {
--header-gradient: linear-gradient(
180deg,
var(--color-secondary-2) 0%,
transparent 100%
);
}
html {
@@ -95,12 +46,12 @@ body {
height: 100%;
margin: 0;
padding: 0;
color: white;
color: var(--color-foreground);
text-align: left;
background-color: var(--color-background);
scrollbar-width: thin;
scrollbar-height: thin;
scrollbar-color: var(--color-scrollbar) transparent;
scrollbar-color: var(--color-foreground-4) transparent;
}
@media (max-width: 720px) {
@@ -135,7 +86,7 @@ body {
}
*:hover::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
background-color: var(--color-scrollbar);
background-color: var(--color-foreground-4);
}
.error::selection,
@@ -153,9 +104,9 @@ a {
text-decoration: none;
}
a.link {
color: #d0d0d0;
color: var(--color-foreground-6);
text-decoration: none;
border-bottom: 1px dashed #444;
border-bottom: 1px dashed var(--color-foreground-5);
}
a.link:hover {
color: var(--color-foreground);
@@ -163,11 +114,11 @@ a.link:hover {
}
a.link.primary {
color: var(--color-primary);
border-bottom-color: var(--color-primary-faded);
border-bottom-color: var(--color-primary-5);
}
a.link.primary:hover {
color: var(--color-primary-faded);
border-bottom-color: var(--color-primary-faded);
color: var(--color-primary-5);
border-bottom-color: var(--color-primary-5);
}
a.address {
border-bottom-color: transparent;
@@ -208,10 +159,9 @@ label.input {
.error {
color: var(--color-negative) !important;
border-color: var(--color-negative) !important;
--box-shadow-color: var(--color-negative-2) !important;
}
.error-message {
background-color: var(--color-negative-background);
background-color: var(--color-negative-2);
word-wrap: break-word;
text-overflow: ellipsis;
overflow-x: hidden;
@@ -223,11 +173,7 @@ label.input {
color: var(--color-secondary);
}
.faded {
color: var(--color-foreground-faded);
}
.yellow {
color: var(--color-yellow);
background: var(--color-yellow-background-solid);
color: var(--color-foreground-5);
}
.off-centered {
height: 100%;
public/typography.css
+1 -1
View File
@@ -61,7 +61,7 @@ p {
}
.txt-missing {
color: var(--color-foreground-faded);
color: var(--color-foreground-5);
font-style: italic;
}
src/Address.svelte
+2 -2
View File
@@ -65,13 +65,13 @@
height: 100%;
}
.address a {
color: var(--color-foreground-90);
color: var(--color-foreground-6);
}
.address a:hover {
color: var(--color-foreground);
}
.highlight {
color: var(--color-foreground-90);
color: var(--color-foreground-6);
font-weight: var(--font-weight-bold);
}
.wrapper {
src/App.svelte
+3 -1
View File
@@ -15,6 +15,7 @@
import Loading from "@app/Loading.svelte";
import Modal from "@app/Modal.svelte";
import LinearGradient from "@app/LinearGradient.svelte";
import ColorPalette from "./ColorPalette.svelte";
const loadConfig = getConfig().then(async cfg => {
if ($state.connection === Connection.Connected) {
@@ -47,7 +48,7 @@
height: 100%;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, #181a38 0%, transparent 100%);
background: var(--header-gradient);
background-repeat: no-repeat;
background-size: 100% 6rem;
}
@@ -80,6 +81,7 @@
<Loading center />
</div>
{:then config}
<ColorPalette />
<Header session={$session} {config} />
<div class="wrapper">
<Router>
src/Authorship.svelte
+3 -3
View File
@@ -32,14 +32,14 @@
padding: 0.125rem 0;
}
.caption {
color: var(--color-foreground-faded);
color: var(--color-foreground-5);
}
.highlight {
color: var(--color-foreground-90);
color: var(--color-foreground-6);
font-weight: var(--font-weight-bold);
}
.date {
color: var(--color-foreground-80);
color: var(--color-foreground-6);
}
</style>
src/Avatar.svelte
+1 -6
View File
@@ -6,7 +6,6 @@
export let source: string;
export let inline = false;
export let grayscale = false;
export let glowOnHover = false;
function handleMissingFile() {
console.warn("Not able to locate", source);
@@ -41,9 +40,6 @@
background-size: cover;
background-repeat: no-repeat;
}
.avatar.glowOnHover:hover {
box-shadow: 0 0 3rem var(--color-secondary);
}
.grayscale {
filter: grayscale();
}
@@ -62,5 +58,4 @@
class="avatar"
on:error={handleMissingFile}
class:inline
class:grayscale
class:glowOnHover />
class:grayscale />
src/Badge.svelte
+11 -10
View File
@@ -18,28 +18,29 @@
display: flex;
}
.foreground {
color: var(--color-foreground-faded);
background: var(--color-foreground-background);
color: var(--color-foreground-6);
background: var(--color-foreground-2);
}
.positive {
color: var(--color-positive);
background-color: var(--color-positive-1);
color: var(--color-positive-6);
background-color: var(--color-positive-3);
}
.negative {
color: var(--color-negative);
background-color: var(--color-negative-1);
background-color: var(--color-negative-4);
}
.primary {
color: var(--color-primary);
background: var(--color-primary-background);
background: linear-gradient(var(--color-primary-3), var(--color-primary-3)),
linear-gradient(var(--color-background), var(--color-background));
}
.tertiary {
color: var(--color-tertiary);
background: var(--color-tertiary-background);
color: var(--color-tertiary-6);
background: var(--color-tertiary-1);
}
.caution {
color: var(--color-yellow);
background: var(--color-yellow-background);
color: var(--color-caution);
background: var(--color-caution-2);
}
</style>
src/BlockTimer.svelte
+1 -1
View File
@@ -18,7 +18,7 @@
height: 0.5rem;
width: 100%;
border-radius: var(--border-radius-small);
background-color: var(--color-secondary-background);
background-color: var(--color-secondary-2);
}
.loader {
height: 0.5rem;
src/Button.svelte
+12 -12
View File
@@ -17,7 +17,7 @@
button {
background: transparent;
border-radius: var(--border-radius-round);
border: 1px solid var(--color-foreground-6);
border: 1px solid var(--color-foreground);
cursor: pointer;
font-family: var(--font-family-sans-serif);
font-feature-settings: "ss01", "ss02", "cv01", "cv03";
@@ -34,11 +34,11 @@
color: var(--color-background);
}
.foreground {
color: var(--color-foreground-6);
color: var(--color-foreground);
}
.foreground[disabled] {
color: var(--color-foreground-faded);
border-color: var(--color-foreground-faded);
color: var(--color-foreground-5);
border-color: var(--color-foreground-5);
}
.foreground:not([disabled]):hover {
background-color: var(--color-foreground);
@@ -49,8 +49,8 @@
border-color: var(--color-primary);
}
.primary[disabled] {
color: var(--color-primary-faded);
border-color: var(--color-primary-faded);
color: var(--color-primary-5);
border-color: var(--color-primary-5);
}
.primary:not([disabled]):hover {
background-color: var(--color-primary);
@@ -61,8 +61,8 @@
border-color: var(--color-secondary);
}
.secondary[disabled] {
color: var(--color-secondary-faded);
border-color: var(--color-secondary-faded);
color: var(--color-secondary-5);
border-color: var(--color-secondary-5);
}
.secondary:not([disabled]):hover {
background-color: var(--color-secondary);
@@ -73,19 +73,19 @@
border-color: var(--color-negative);
}
.negative[disabled] {
color: var(--color-negative-faded);
border-color: var(--color-negative-faded);
color: var(--color-negative-5);
border-color: var(--color-negative-5);
}
.negative:not([disabled]):hover {
background-color: var(--color-negative);
}
.text {
color: var(--color-foreground-6);
color: var(--color-foreground);
border: none;
}
.text[disabled] {
color: var(--color-foreground-4);
color: var(--color-foreground-5);
}
.text:not([disabled]):hover {
background-color: var(--color-foreground);
src/Clipboard.svelte
+2 -2
View File
@@ -28,10 +28,10 @@
height: 1.5rem;
}
.clipboard:hover :global(svg) {
fill: var(--color-foreground-90);
fill: var(--color-foreground);
}
.clipboard:active :global(svg) {
fill: var(--color-positive);
fill: var(--color-foreground-6);
}
.clipboard:hover {
border-radius: var(--border-radius);
src/ColorPalette.svelte
+189
View File
@@ -0,0 +1,189 @@
<script lang="ts">
function extractCssVariables(variableName: string) {
return Array.from(document.styleSheets)
.filter(
sheet =>
sheet.href === null || sheet.href.startsWith(window.location.origin),
)
.reduce<string[]>(
(acc, sheet) =>
(acc = [
...acc,
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
...Array.from(sheet.cssRules).reduce(
(def, rule) =>
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
(def =
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
rule.selectorText === ":root"
? [
...def,
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
...Array.from(rule.style).filter(name =>
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
name.startsWith(variableName),
),
]
: def),
[],
),
]),
[],
);
}
// rg "\--color-\w*(-\d)*" -o --no-line-number --no-filename -g "\!public/colors.css" -g "\!src/ColorPalette.svelte" | sort | uniq | jq -sRM 'split("\n")[:-1]'
const usedColors = [
"--color-background",
"--color-caution",
"--color-caution-2",
"--color-caution-3",
"--color-caution-6",
"--color-foreground",
"--color-foreground-1",
"--color-foreground-2",
"--color-foreground-3",
"--color-foreground-4",
"--color-foreground-5",
"--color-foreground-6",
"--color-negative",
"--color-negative-1",
"--color-negative-2",
"--color-negative-3",
"--color-negative-4",
"--color-negative-5",
"--color-negative-6",
"--color-positive",
"--color-positive-1",
"--color-positive-2",
"--color-positive-3",
"--color-positive-6",
"--color-primary",
"--color-primary-3",
"--color-primary-5",
"--color-secondary",
"--color-secondary-1",
"--color-secondary-2",
"--color-secondary-3",
"--color-secondary-5",
"--color-secondary-6",
"--color-tertiary",
"--color-tertiary-1",
"--color-tertiary-2",
"--color-tertiary-6",
];
const colors = extractCssVariables("--color");
const colorGroups = [
...new Set(
colors.map(color => {
const match = color.match(/--color-(\w*)-?/);
if (match) {
return match[1];
} else {
return "";
}
}),
),
];
let show = false;
let checkers = false;
const onKeydown = (event: KeyboardEvent) => {
const hasInputTarget =
event.target &&
((event.target as HTMLInputElement).type === "text" ||
(event.target as HTMLTextAreaElement).type === "textarea");
if (
hasInputTarget ||
event.repeat ||
event.altKey ||
event.metaKey ||
event.ctrlKey
) {
return false;
}
if (event.key === "d") {
show = !show;
}
};
function clickOutside(ev: MouseEvent) {
if (thisComponent && !thisComponent.contains(ev.target as HTMLDivElement)) {
show = !show;
}
}
let thisComponent: HTMLDivElement;
</script>
<style>
.container {
position: fixed;
background: var(--color-background);
padding: 2rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: var(--elevation-low);
border-radius: 1rem;
z-index: 100;
min-width: 46rem;
}
.checkers {
background: repeating-conic-gradient(#88888833 0% 25%, transparent 0% 50%)
50% / 20px 20px;
border-radius: 1rem;
}
.color {
width: 4rem;
height: 4rem;
border-radius: 0.5rem;
outline-style: solid !important;
outline-color: #88888899 !important;
outline-offset: 0.5rem;
margin: 1rem;
}
.unused {
outline-style: dotted !important;
outline-color: #55555555 !important;
}
</style>
<svelte:window on:keydown={onKeydown} on:click={clickOutside} />
{#if show}
<div
bind:this={thisComponent}
class="container"
on:click={() => (checkers = !checkers)}>
<div class:checkers>
{#each colorGroups as colorGroup}
<div>
{#each colors.filter(color => {
return color.match(`--color-${colorGroup}`);
}) as color}
<div style="display: inline-flex;">
<div
class:unused={!usedColors.includes(color)}
title={color}
class="color"
style={`background-color: var(${color});`} />
</div>
{/each}
</div>
{/each}
</div>
</div>
{/if}
src/Comment.svelte
+1 -1
View File
@@ -56,7 +56,7 @@
}
.card {
flex: 1;
border: 1px solid var(--color-foreground-3);
border: 1px solid var(--color-foreground-4);
border-radius: var(--border-radius);
}
.card-header {
src/Dropdown.svelte
+3 -3
View File
@@ -18,11 +18,11 @@
<style>
.dropdown {
background-color: var(--color-foreground-background);
background-color: var(--color-foreground-1);
margin-top: 0.5rem;
padding: 0.5rem 0;
position: absolute;
box-shadow: 16px 16px 32px 32px var(--color-shadow);
box-shadow: var(--elevation-low);
z-index: 10;
border-radius: var(--border-radius-small);
}
@@ -37,7 +37,7 @@
}
.dropdown-item:hover,
.selected {
background-color: var(--color-foreground-background-lighter);
background-color: var(--color-foreground-2);
}
@media (max-width: 720px) {
.dropdown {
src/Header.svelte
+18 -16
View File
@@ -16,6 +16,7 @@
import MobileNavbar from "./MobileNavbar.svelte";
import SeedDropdown from "./SeedDropdown.svelte";
import Button from "@app/Button.svelte";
import ThemeToggle from "./ThemeToggle.svelte";
export let session: Session | null;
export let config: Config;
@@ -40,22 +41,22 @@
padding: 1.5rem;
height: 5.5rem;
}
header .left,
header .right {
.left,
.right {
display: flex;
align-items: center;
height: var(--button-regular-height);
gap: 1rem;
}
header .nav {
.nav {
display: inline-block;
height: 100%;
margin-left: 1.5rem;
white-space: nowrap;
}
header .nav .seeds-container {
.nav .seeds-container {
display: inline-block;
}
.logo {
display: flex;
height: var(--button-regular-height);
@@ -78,27 +79,25 @@
.search {
height: var(--button-regular-height);
width: 16rem;
margin-left: 1.5rem;
margin-left: 0.5rem;
display: inline-block;
}
.connect {
display: inline-block;
margin-left: 2rem;
}
.network {
color: var(--color-tertiary);
background-color: var(--color-tertiary-background);
color: var(--color-tertiary-6);
background-color: var(--color-tertiary-1);
line-height: 1.5em;
padding: 0rem 1rem;
height: var(--button-regular-height);
display: flex;
align-items: center;
border-radius: var(--border-radius-round);
margin-left: 2rem;
}
.network.unavailable {
color: #888;
background-color: #ffffff11;
color: var(--color-foreground-5);
background-color: var(--color-foreground-3);
}
.network:last-child {
margin-right: 0;
@@ -108,13 +107,12 @@
padding: 0.5rem 0.5rem;
cursor: pointer;
user-select: none;
color: var(--color-foreground-6);
color: var(--color-foreground);
}
.register:hover {
color: var(--color-foreground);
}
.balance {
margin: 0 2rem;
white-space: nowrap;
}
@@ -122,9 +120,13 @@
display: none;
}
@media (max-width: 720px) {
header .right {
gap: 1rem;
}
.network,
.search,
header .nav,
.register,
.balance {
display: none;
}
@@ -132,7 +134,6 @@
display: flex;
justify-content: center;
align-items: center;
margin-left: 10px;
height: 42px;
width: 42px;
z-index: 2;
@@ -178,7 +179,6 @@
</div>
<div class="right">
<a use:link class="register" href="/registrations">Register</a>
{#if config && config.network.name === "rinkeby"}
<span class="network">Rinkeby</span>
{:else if config && config.network.name === "homestead"}
@@ -186,6 +186,7 @@
{:else}
<span class="network unavailable">No Network</span>
{/if}
<a use:link class="register" href="/registrations">Register</a>
{#if address}
<span class="balance">
@@ -223,6 +224,7 @@
<Connect buttonVariant="foreground" {config} />
</span>
{/if}
<ThemeToggle />
<div class="toggle" on:click={toggleNavbar}>
<span style="transform: scale(1.2);">
<Icon name="ellipsis" />
src/Icon.svelte
+58
View File
@@ -8,6 +8,8 @@
| "ellipsis"
| "fork"
| "github"
| "moon"
| "sun"
| "twitter"
| "url";
</script>
@@ -122,6 +124,28 @@
13.9693 16.5706 13.9693 17.339C13.9693 18.4368 13.9593 19.3186 13.9593
19.5852C13.9593 19.8006 14.0993 20.0569 14.5093 19.9749C17.71 18.8989 20
15.8227 20 12.2031C20 7.67295 16.418 4 12 4" />
{:else if name === "moon"}
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M15.75 1.5C16.1642 1.5
16.5 1.83579 16.5 2.25V3H17.25C17.6642 3 18 3.33579 18 3.75C18 4.16421
17.6642 4.5 17.25 4.5H16.5V5.25C16.5 5.66421 16.1642 6 15.75 6C15.3358 6 15
5.66421 15 5.25V4.5H14.25C13.8358 4.5 13.5 4.16421 13.5 3.75C13.5 3.33579
13.8358 3 14.25 3H15V2.25C15 1.83579 15.3358 1.5 15.75 1.5ZM10.2246
3.15456C10.4159 3.34623 10.489 3.62613 10.4159 3.88688C9.65641 6.59529
10.4385 9.58344 12.4276 11.5724C14.4166 13.5615 17.4047 14.3436 20.1131
13.5841C20.3739 13.511 20.6538 13.5841 20.8454 13.7754C21.0371 13.9667
21.1108 14.2465 21.0382 14.5074C19.1394 21.3293 10.2649 23.5102 5.37735
18.6226C0.393755 13.639 2.70287 4.85168 9.49264 2.96184C9.75353 2.88923
10.0333 2.96289 10.2246 3.15456ZM8.69851 4.84862C3.95753 7.06376 2.57424
13.6982 6.43801 17.562C10.2273 21.3512 16.9232 20.041 19.1499
15.3017C16.3194 15.6466 13.4079 14.6741 11.3669 12.6331C9.32556 10.5918
8.35305 7.67963 8.69851 4.84862ZM20.25 5.25C20.6642 5.25 21 5.58579 21
6V7.5H22.5C22.9142 7.5 23.25 7.83579 23.25 8.25C23.25 8.66421 22.9142 9
22.5 9H21V10.5C21 10.9142 20.6642 11.25 20.25 11.25C19.8358 11.25 19.5
10.9142 19.5 10.5V9H18C17.5858 9 17.25 8.66421 17.25 8.25C17.25 7.83579
17.5858 7.5 18 7.5H19.5V6C19.5 5.58579 19.8358 5.25 20.25 5.25Z" />
{:else if name === "url"}
<path
d="M18.7566 11.2493L15.7531 14.2518C14.0953 15.9107 11.4059 15.9107
@@ -141,6 +165,40 @@
12.7506C3.58542 14.4094 3.58542 17.0978 5.24374 18.7566C6.90207 20.4145
9.59097 20.4145 11.2493 18.7566L13.5251 16.4809C12.6158 16.6146 11.6822
16.5234 10.8164 16.1865Z" />
{:else if name === "sun"}
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12 0.75C12.4142 0.75
12.75 1.08579 12.75 1.5V3.375C12.75 3.78921 12.4142 4.125 12 4.125C11.5858
4.125 11.25 3.78921 11.25 3.375V1.5C11.25 1.08579 11.5858 0.75 12
0.75ZM4.04467 4.04467C4.33756 3.75178 4.81244 3.75178 5.10533
4.04467L6.42721 5.36655C6.7201 5.65944 6.7201 6.13431 6.42721
6.42721C6.13431 6.7201 5.65944 6.7201 5.36655 6.42721L4.04467
5.10533C3.75178 4.81244 3.75178 4.33756 4.04467 4.04467ZM19.9553
4.04467C20.2482 4.33756 20.2482 4.81244 19.9553 5.10533L18.6335
6.42721C18.3406 6.7201 17.8657 6.7201 17.5728 6.42721C17.2799 6.13431
17.2799 5.65944 17.5728 5.36655L18.8947 4.04467C19.1876 3.75178 19.6624
3.75178 19.9553 4.04467ZM12 7.125C9.30761 7.125 7.125 9.30761 7.125
12C7.125 14.6924 9.30761 16.875 12 16.875C14.6924 16.875 16.875 14.6924
16.875 12C16.875 9.30761 14.6924 7.125 12 7.125ZM5.625 12C5.625 8.47918
8.47918 5.625 12 5.625C15.5208 5.625 18.375 8.47918 18.375 12C18.375
15.5208 15.5208 18.375 12 18.375C8.47918 18.375 5.625 15.5208 5.625
12ZM0.75 12C0.75 11.5858 1.08579 11.25 1.5 11.25H3.375C3.78921 11.25 4.125
11.5858 4.125 12C4.125 12.4142 3.78921 12.75 3.375 12.75H1.5C1.08579 12.75
0.75 12.4142 0.75 12ZM19.875 12C19.875 11.5858 20.2108 11.25 20.625
11.25H22.5C22.9142 11.25 23.25 11.5858 23.25 12C23.25 12.4142 22.9142 12.75
22.5 12.75H20.625C20.2108 12.75 19.875 12.4142 19.875 12ZM6.42721
17.5728C6.7201 17.8657 6.7201 18.3406 6.42721 18.6335L5.10533
19.9553C4.81244 20.2482 4.33756 20.2482 4.04467 19.9553C3.75178 19.6624
3.75178 19.1876 4.04467 18.8947L5.36655 17.5728C5.65944 17.2799 6.13431
17.2799 6.42721 17.5728ZM17.5728 17.5728C17.8657 17.2799 18.3406 17.2799
18.6335 17.5728L19.9553 18.8947C20.2482 19.1876 20.2482 19.6624 19.9553
19.9553C19.6624 20.2482 19.1876 20.2482 18.8947 19.9553L17.5728
18.6335C17.2799 18.3406 17.2799 17.8657 17.5728 17.5728ZM12 19.875C12.4142
19.875 12.75 20.2108 12.75 20.625V22.5C12.75 22.9142 12.4142 23.25 12
23.25C11.5858 23.25 11.25 22.9142 11.25 22.5V20.625C11.25 20.2108 11.5858
19.875 12 19.875Z" />
{:else if name === "twitter"}
<path
d="M19.9687 7.54849C19.3697 7.81214 18.7351 7.98617 18.0853
src/Input.svelte
+14 -11
View File
@@ -5,11 +5,10 @@
export let name: string;
export let value: string;
export let small = false;
export let clipboard = false;
</script>
<style>
main {
.wrapper {
display: flex;
align-items: center;
}
@@ -22,6 +21,9 @@
-webkit-mask: linear-gradient(90deg, transparent 0%, #fff 50%);
mask: linear-gradient(90deg, transparent 0%, #fff 50%);
border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
color: var(--color-caution-6);
background: linear-gradient(var(--color-caution-2), var(--color-caution-2)),
linear-gradient(var(--color-background), var(--color-background));
}
input {
font-size: var(--font-size-tiny);
@@ -33,17 +35,18 @@
height: 2rem;
text-overflow: ellipsis !important;
border-radius: var(--border-radius-small);
color: var(--color-caution-6);
background: linear-gradient(var(--color-caution-2), var(--color-caution-2)),
linear-gradient(var(--color-background), var(--color-background));
}
main:hover .clipboard {
.wrapper:hover .clipboard {
visibility: visible;
}
</style>
<main>
<input class={$$props.class} readonly={clipboard} {name} {value} />
{#if clipboard}
<span class="clipboard {$$props.class}">
<Clipboard text={value} {small} on:copied={closeFocused} />
</span>
{/if}
</main>
<div class="wrapper">
<input readonly {name} {value} />
<span class="clipboard">
<Clipboard text={value} {small} on:copied={closeFocused} />
</span>
</div>
src/Loading.svelte
+4 -5
View File
@@ -2,7 +2,6 @@
import { onDestroy } from "svelte";
export let small = false;
export let color = "secondary";
export let center = false;
export let fadeIn = false;
export let margins = false;
@@ -46,7 +45,7 @@
.spinner > div {
width: 18px;
height: 18px;
background-color: #5555ff;
background-color: var(--color-secondary);
border-radius: var(--border-radius-round);
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
@@ -157,10 +156,10 @@
class:center
class:margins
class:condensed>
<div class="bounce1" style="background-color: var(--color-{color})" />
<div class="bounce1" style="background-color: var(--color-secondary)" />
{#if !condensed}
<div class="bounce2" style="background-color: var(--color-{color})" />
<div class="bounce3" style="background-color: var(--color-{color})" />
<div class="bounce2" style="background-color: var(--color-secondary)" />
<div class="bounce3" style="background-color: var(--color-secondary)" />
{/if}
</div>
</div>
src/Markdown.svelte
+11 -11
View File
@@ -67,8 +67,8 @@
.front-matter {
font-size: var(--font-size-tiny);
font-family: var(--font-family-monospace);
color: var(--color-foreground-90);
border: 1px dashed var(--color-foreground-subtle);
color: var(--color-foreground);
border: 1px dashed var(--color-foreground-4);
padding: 0.5rem;
margin-bottom: 1.5rem;
}
@@ -96,7 +96,7 @@
font-weight: var(--font-weight-medium);
padding: 1rem 0 0.5rem 0;
margin: 0 0 0.75rem;
border-bottom: 1px solid var(--color-foreground-subtle);
border-bottom: 1px solid var(--color-foreground-4);
}
.markdown :global(h2) {
@@ -104,7 +104,7 @@
font-weight: var(--font-weight-normal);
padding: 0.25rem 0;
margin: 2rem 0 0.5rem;
border-bottom: 1px dashed var(--color-foreground-subtle);
border-bottom: 1px dashed var(--color-foreground-4);
}
.markdown :global(h3) {
@@ -163,7 +163,7 @@
.markdown :global(code) {
font-family: var(--font-family-monospace);
font-size: var(--font-size-regular);
color: var(--color-light);
color: var(--color-secondary-6);
}
.markdown :global(pre code) {
@@ -174,7 +174,7 @@
.markdown :global(pre) {
font-family: var(--font-family-monospace);
font-size: var(--font-size-regular);
background-color: var(--color-foreground-background);
background-color: var(--color-foreground-2);
padding: 1rem !important;
border-radius: var(--border-radius-small);
margin: 1rem 0;
@@ -194,7 +194,7 @@
}
.markdown :global(a) {
text-decoration: none;
border-bottom: 1px solid var(--color-foreground-90);
border-bottom: 1px solid var(--color-foreground-6);
}
.markdown :global(a.no-underline) {
border-bottom: none;
@@ -206,7 +206,7 @@
overflow: hidden;
background: transparent;
border: 0;
border-bottom: 1px solid var(--color-foreground-faded);
border-bottom: 1px solid var(--color-foreground-4);
}
.markdown :global(ol) {
@@ -225,17 +225,17 @@
border-collapse: collapse;
border-radius: 0.5rem;
border-style: hidden;
box-shadow: 0 0 0 1px var(--color-foreground-subtle);
box-shadow: 0 0 0 1px var(--color-foreground-4);
overflow: hidden;
}
.markdown :global(td) {
text-align: left;
text-overflow: ellipsis;
border: 1px solid var(--color-foreground-subtle);
border: 1px solid var(--color-foreground-4);
padding: 0.5rem 1rem;
}
.markdown :global(tr:nth-child(even)) {
background-color: var(--color-foreground-even-subtler);
background-color: var(--color-foreground-2);
}
.markdown :global(th) {
text-align: center;
src/Message.svelte
+1 -1
View File
@@ -9,7 +9,7 @@
.message-error {
color: var(--color-negative);
border-radius: var(--border-radius);
background-color: var(--color-glow-error);
background-color: var(--glow-error);
}
</style>
src/MobileNavbar.svelte
-1
View File
@@ -66,7 +66,6 @@
<Search size={20} on:search={() => dispatch("select")} />
</div>
<div>
<a use:link on:click={() => dispatch("select")} href="/orgs">Orgs</a>
<a use:link on:click={() => dispatch("select")} href="/registrations">
Register
</a>
src/Modal.svelte
+7 -4
View File
@@ -25,18 +25,21 @@
}
.modal-overlay {
z-index: 200;
background-color: rgba(0, 0, 0, 0.75);
background-color: #00000075;
}
.modal {
padding: 2rem 3rem;
border: 1px solid var(--color-secondary);
font-family: var(--font-family-sans-serif);
background: var(--color-background);
box-shadow: 8px 8px 64px var(--box-shadow-color);
box-shadow: var(--elevation-high);
min-width: 480px;
max-width: 760px;
text-align: center;
}
.modal.error {
box-shadow: var(--elevation-high-negative);
}
.modal.error .modal-title,
.modal.error .modal-subtitle,
.modal.error .modal-body,
@@ -49,10 +52,10 @@
.modal.modal-subtle {
border: none;
box-shadow: none;
background: radial-gradient(var(--color-glow) 0%, transparent 70%);
background: radial-gradient(var(--glow) 0%, transparent 70%);
}
.modal.modal-subtle.error {
background: radial-gradient(var(--color-glow-error) 0%, transparent 70%);
background: radial-gradient(var(--glow-error) 0%, transparent 70%);
}
.modal-title {
color: var(--color-foreground);
src/Placeholder.svelte
+2 -2
View File
@@ -7,8 +7,8 @@
text-align: center;
border-radius: var(--border-radius-small);
padding-bottom: 2rem;
color: var(--color-foreground-faded) !important;
background-color: var(--color-foreground-background);
color: var(--color-foreground-5) !important;
background-color: var(--color-foreground-1);
}
.placeholder header {
padding: 1rem 0;
src/RadicleUrn.svelte
+1 -1
View File
@@ -21,7 +21,7 @@
display: inline-flex;
font-size: var(--font-size-regular);
line-height: 2rem;
color: var(--color-foreground-90);
color: var(--color-foreground-6);
vertical-align: middle;
}
.icon {
src/ReactionSelector.svelte
+3 -3
View File
@@ -16,7 +16,7 @@
align-items: center;
justify-content: center;
position: relative;
color: var(--color-foreground-faded);
color: var(--color-foreground-5);
border-radius: var(--border-radius);
height: 1rem;
width: 1rem;
@@ -29,7 +29,7 @@
.modal {
position: absolute;
left: 1.5rem;
background-color: var(--color-foreground-background);
background-color: var(--color-foreground-1);
border-radius: var(--border-radius);
}
.modal > div {
@@ -44,7 +44,7 @@
border-bottom-left-radius: var(--border-radius-small);
}
.modal > div:hover {
background-color: var(--color-foreground-subtle);
background-color: var(--color-foreground-2);
}
</style>
src/SeedAddress.svelte
+1 -1
View File
@@ -18,7 +18,7 @@
display: inline-flex;
font-size: var(--font-size-regular);
line-height: 2rem;
color: var(--color-foreground-90);
color: var(--color-foreground-6);
vertical-align: middle;
}
.seed-icon {
src/ThemeToggle.svelte
+62
View File
@@ -0,0 +1,62 @@
<script lang="ts" context="module">
export type Theme = "dark" | "light";
import { writable } from "svelte/store";
export const theme = writable<Theme>(loadTheme());
function storeTheme(theme: Theme): void {
window.localStorage.setItem("theme", theme);
}
function loadTheme(): Theme {
const storedTheme = window.localStorage.getItem("theme");
if (storedTheme === null) {
return "dark";
} else {
return storedTheme as Theme;
}
}
</script>
<script lang="ts">
import Icon from "@app/Icon.svelte";
$: document.documentElement.setAttribute("data-theme", $theme);
</script>
<style>
.theme-button {
border-radius: 50%;
border: 1px solid var(--color-foreground);
color: var(--color-foreground);
cursor: pointer;
display: flex;
height: 40px;
width: 40px;
justify-content: center;
align-items: center;
user-select: none;
}
.theme-button:hover {
color: var(--color-background);
background-color: var(--color-foreground);
border-color: transparent;
}
</style>
<div
class="theme-button"
role="button"
on:click={() => {
theme.set($theme === "dark" ? "light" : "dark");
storeTheme($theme);
}}>
{#if $theme === "dark"}
<Icon name="sun" />
{:else}
<Icon name="moon" />
{/if}
</div>
src/ToggleButton.svelte
+3 -3
View File
@@ -32,7 +32,7 @@
}
button {
border-radius: var(--border-radius-small);
color: var(--color-foreground-80);
color: var(--color-foreground-6);
cursor: pointer;
font-family: var(--font-family-monospace);
font-size: var(--font-size-tiny);
@@ -46,12 +46,12 @@
button.active {
cursor: pointer;
color: var(--color-foreground);
background-color: var(--color-foreground-background);
background-color: var(--color-foreground-1);
}
button[disabled],
button[disabled]:hover {
cursor: not-allowed;
color: var(--color-foreground-80);
color: var(--color-foreground-6);
}
</style>
src/base/home/Index.svelte
+1 -1
View File
@@ -41,7 +41,7 @@
max-width: 74rem;
}
.blurb {
color: var(--color-foreground-90);
color: var(--color-foreground);
padding: 0rem;
max-width: 70%;
font-size: var(--font-size-medium);
src/base/projects/Blob.svelte
+8 -8
View File
@@ -31,7 +31,7 @@
padding: 0 0.5rem 0 1rem;
color: var(--color-foreground);
border-width: 1px 1px 0 1px;
border-color: var(--color-foreground-subtle);
border-color: var(--color-foreground-3);
border-style: solid;
border-top-left-radius: var(--border-radius-small);
border-top-right-radius: var(--border-radius-small);
@@ -48,7 +48,7 @@
.last-commit {
padding: 0.5rem;
color: var(--color-secondary);
background-color: var(--color-secondary-background);
background-color: var(--color-secondary-2);
font-size: var(--font-size-tiny);
border-radius: var(--border-radius-small);
overflow-x: hidden;
@@ -62,7 +62,7 @@
}
.line-numbers {
color: var(--color-foreground-subtle);
color: var(--color-foreground-4);
font-family: var(--font-family-sans-serif);
text-align: right;
user-select: none;
@@ -73,7 +73,7 @@
}
.line-number:hover,
.line-number.highlighted {
color: var(--color-foreground-90);
color: var(--color-foreground-6);
}
.code {
@@ -84,7 +84,7 @@
.container {
position: relative;
display: flex;
border: 1px solid var(--color-foreground-subtle);
border: 1px solid var(--color-foreground-3);
border-top-style: dashed;
border-bottom-left-radius: var(--border-radius-small);
border-bottom-right-radius: var(--border-radius-small);
@@ -97,8 +97,8 @@
align-items: center;
width: 100%;
height: 16rem;
background-color: var(--color-foreground-background);
color: var(--color-foreground-90);
background-color: var(--color-foreground-1);
color: var(--color-foreground-6);
font-family: var(--font-family-monospace);
}
.binary > * {
@@ -110,7 +110,7 @@
width: 100%;
height: 1.5rem;
top: 1rem;
background-color: var(--color-yellow-background-lighter);
background-color: var(--color-caution-3);
}
.no-scrollbar {
src/base/projects/BranchSelector.svelte
+4 -4
View File
@@ -42,7 +42,7 @@
cursor: pointer;
padding: 0.5rem 0.75rem;
color: var(--color-secondary);
background-color: var(--color-secondary-background);
background-color: var(--color-secondary-2);
border-radius: var(--border-radius-small) 0 0 var(--border-radius-small);
user-select: none;
}
@@ -50,12 +50,12 @@
cursor: not-allowed;
}
.branch:hover:not(.not-allowed) {
background-color: var(--color-foreground-background-lighter);
background-color: var(--color-foreground-2);
}
.commit .hash {
display: inline-block;
color: var(--color-secondary);
background-color: var(--color-secondary-background-darker);
background-color: var(--color-secondary-1);
padding: 0.5rem 0.75rem;
border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
}
@@ -65,7 +65,7 @@
.stat {
font-family: var(--font-family-monospace);
padding: 0.5rem 0.75rem;
background: var(--color-foreground-background);
background: var(--color-foreground-1);
}
</style>
src/base/projects/Browser.svelte
+29 -9
View File
@@ -1,10 +1,13 @@
<script lang="ts">
import type { Readable } from "svelte/store";
import type * as proj from "@app/project";
import type { Theme } from "@app/ThemeToggle.svelte";
import Loading from "@app/Loading.svelte";
import Placeholder from "@app/Placeholder.svelte";
import * as utils from "@app/utils";
import Button from "@app/Button.svelte";
import { theme } from "@app/ThemeToggle.svelte";
import Tree from "./Tree.svelte";
import Blob from "./Blob.svelte";
@@ -17,7 +20,7 @@
type State =
| { status: Status.Loading; path: string }
| { status: Status.Loaded; path: string; blob: proj.Blob };
| { status: Status.Loaded; path: string; blob: proj.Blob; theme: Theme };
export let project: proj.Project;
export let tree: proj.Tree;
@@ -33,8 +36,12 @@
// Whether the mobile file tree is visible.
let mobileFileTree = false;
const loadBlob = async (path: string): Promise<proj.Blob> => {
if (state.status === Status.Loaded && state.path === path) {
const loadBlob = async (path: string, theme: Theme): Promise<proj.Blob> => {
if (
state.status === Status.Loaded &&
state.path === path &&
state.theme === theme
) {
return state.blob;
}
@@ -42,10 +49,16 @@
const promise =
path === "/"
? project.getReadme(commit)
: project.getBlob(commit, path, { highlight: !isMarkdownPath });
: project.getBlob(
commit,
path,
isMarkdownPath
? { highlight: false }
: { highlight: true, theme: `base16-ocean.${theme}` },
);
state = { status: Status.Loading, path };
state = { status: Status.Loaded, path, blob: await promise };
state = { status: Status.Loaded, path, blob: await promise, theme };
return state.blob;
};
@@ -56,11 +69,11 @@
return project.getBlob(commit, finalPath, { highlight: false });
};
const onSelect = async ({ detail: newPath }: { detail: string }) => {
const onSelect = async (newPath: string, theme: Theme) => {
// Ensure we don't spend any time in a "loading" state. This means
// the loading spinner won't be shown, and instead the blob will be
// displayed once loaded.
const blob = await loadBlob(newPath);
const blob = await loadBlob(newPath, theme);
getBlob = new Promise(resolve => resolve(blob));
// Close mobile tree if user navigates to other file
@@ -79,7 +92,7 @@
mobileFileTree = !mobileFileTree;
};
$: getBlob = loadBlob(path);
$: getBlob = loadBlob(path, $theme);
$: loadingPath = state.status === Status.Loading ? state.path : null;
</script>
@@ -171,7 +184,14 @@
{#if tree.entries.length > 0}
<div class="column-left" class:column-left-visible={mobileFileTree}>
<div class="source-tree">
<Tree {tree} {path} {fetchTree} {loadingPath} on:select={onSelect} />
<Tree
{tree}
{path}
{fetchTree}
{loadingPath}
on:select={e => {
onSelect(e.detail, $theme);
}} />
</div>
</div>
<div class="column-right">
src/base/projects/CloneButton.svelte
+8 -12
View File
@@ -9,9 +9,9 @@
<style>
.clone-button {
background-color: var(--color-yellow-background);
background-color: var(--color-caution-2);
border-radius: var(--border-radius-small);
color: var(--color-yellow);
color: var(--color-caution-6);
cursor: pointer;
font-family: var(--font-family-monospace);
min-width: max-content;
@@ -19,12 +19,12 @@
user-select: none;
}
.clone-button:hover {
background-color: var(--color-foreground-background-lighter);
background-color: var(--color-caution-3);
}
.dropdown {
background-color: var(--color-foreground-background);
background-color: var(--color-foreground-1);
border-radius: var(--border-radius-small);
box-shadow: 16px 16px 32px 32px var(--color-shadow);
box-shadow: var(--elevation-low);
margin-top: 0.5rem;
padding: 1rem;
position: absolute;
@@ -40,7 +40,7 @@
}
}
label {
color: var(--color-foreground-faded);
color: var(--color-foreground-6);
display: block;
font-size: var(--font-size-tiny);
padding: 0.5rem 0.5rem 0 0.25rem;
@@ -53,9 +53,7 @@
<div class="dropdown">
<Input
name="rad-clone-url"
value="rad clone rad://{seedHost}/{utils.parseRadicleId(urn)}"
class="yellow"
clipboard />
value="rad clone rad://{seedHost}/{utils.parseRadicleId(urn)}" />
<label for="rad-clone-url">
Use the <a
target="_blank"
@@ -68,9 +66,7 @@
<br />
<Input
name="git-clone-url"
value="https://{seedHost}/{utils.parseRadicleId(urn)}.git"
class="yellow"
clipboard />
value="https://{seedHost}/{utils.parseRadicleId(urn)}.git" />
<label for="git-clone-url">
Use Git to clone this repository from the URL above.
</label>
src/base/projects/Commit.svelte
+2 -2
View File
@@ -25,7 +25,7 @@
}
header {
padding: 1rem;
background: var(--color-foreground-background-subtle);
background: var(--color-foreground-1);
border-radius: var(--border-radius);
margin-bottom: 1.5rem;
}
@@ -39,7 +39,7 @@
margin: 0.5rem 0 1rem 0;
}
.sha1 {
color: var(--color-foreground-80);
color: var(--color-foreground-5);
font-size: var(--font-size-small);
}
.authorship {
src/base/projects/Commit/CommitAuthorship.svelte
+1 -1
View File
@@ -11,7 +11,7 @@
.authorship {
display: flex;
align-items: center;
color: var(--color-foreground-faded);
color: var(--color-foreground-5);
padding: 0.125rem 0;
}
.authorship .author,
src/base/projects/Commit/CommitTeaser.svelte
+2 -2
View File
@@ -23,11 +23,11 @@
padding: 0 1.5rem;
}
.commit-teaser {
background-color: var(--color-foreground-background);
background-color: var(--color-foreground-1);
padding: 0.75rem 0rem;
}
.commit-teaser:hover {
background-color: var(--color-foreground-background-lighter);
background-color: var(--color-foreground-2);
}
.commit-teaser:first-child {
border-top-left-radius: var(--border-radius-small);
src/base/projects/Commit/CommitVerifiedBadge.svelte
+5 -4
View File
@@ -24,9 +24,9 @@
position: absolute;
}
.popup {
background-color: var(--color-foreground-background);
background-color: var(--color-foreground-1);
border-radius: var(--border-radius-small);
box-shadow: 16px 16px 32px 32px var(--color-shadow);
box-shadow: var(--elevation-low);
color: var(--color-foreground);
font-size: var(--font-size-tiny);
left: -10rem;
@@ -45,12 +45,13 @@
color: var(--color-tertiary);
}
.committer {
border-top: 1px dashed var(--color-foreground-subtle);
border-top: 1px dashed var(--color-foreground-4);
padding: 0.75rem;
}
.peer {
padding-top: 0.5rem;
word-break: break-all;
color: var(--color-foreground-5);
}
</style>
@@ -75,7 +76,7 @@
<CommitAuthorship {commit} showAuthor={false} showTime={false} />
{#if commit.context.committer}
<div class="peer">
<span class="faded">{commit.context.committer.peer.id}</span>
{commit.context.committer.peer.id}
</div>
{/if}
</div>
src/base/projects/Header.svelte
+4 -4
View File
@@ -56,23 +56,23 @@
cursor: pointer;
}
.clickable:hover {
background-color: var(--color-foreground-background-lighter);
background-color: var(--color-foreground-2);
}
.not-allowed {
cursor: not-allowed;
}
.not-allowed.widget {
color: var(--color-foreground-faded);
color: var(--color-foreground-5);
}
.stat {
font-family: var(--font-family-monospace);
padding: 0.5rem 0.75rem;
height: 2.125rem;
background: var(--color-foreground-background);
background: var(--color-foreground-1);
}
.stat.active {
color: var(--color-background);
background: var(--color-foreground-90);
background: var(--color-foreground);
}
@media (max-width: 960px) {
src/base/projects/History.svelte
+3 -3
View File
@@ -44,20 +44,20 @@
font-size: var(--font-size-small);
}
.commit-group header {
color: var(--color-foreground-faded);
color: var(--color-foreground-6);
}
.commit-group-headers {
margin-bottom: 2rem;
}
.commit {
background-color: var(--color-foreground-background);
background-color: var(--color-foreground-1);
}
.commit:not(:last-child) {
border-bottom: 1px dashed var(--color-background);
}
.commit:hover {
background-color: var(--color-foreground-background-lighter);
background-color: var(--color-foreground-2);
cursor: pointer;
}
.commit:first-child {
src/base/projects/Issue.svelte
+8 -7
View File
@@ -22,7 +22,7 @@
<style>
header {
padding: 1rem;
background: var(--color-foreground-background-subtle);
background: var(--color-foreground-1);
border-radius: var(--border-radius);
margin-bottom: 2rem;
}
@@ -44,23 +44,23 @@
}
.metadata-section {
margin-bottom: 1rem;
border-bottom: 1px dashed var(--color-foreground-subtle);
border-bottom: 1px dashed var(--color-foreground-4);
}
.metadata-section-header {
font-size: var(--font-size-small);
margin-bottom: 0.75rem;
color: var(--color-foreground-faded);
color: var(--color-foreground-5);
}
.metadata-section-body {
margin-bottom: 1.25rem;
}
.metadata-section-empty {
color: var(--color-foreground-90);
color: var(--color-foreground-6);
}
.label {
border-radius: var(--border-radius);
color: var(--color-tertiary);
background-color: var(--color-tertiary-background);
background-color: var(--color-tertiary-2);
padding: 0.25rem 0.75rem;
margin-right: 0.5rem;
font-size: var(--font-size-small);
@@ -84,7 +84,7 @@
.id {
font-size: var(--font-size-tiny);
margin-left: 0.75rem;
color: var(--color-foreground-faded);
color: var(--color-foreground-5);
}
.summary-state {
padding: 0.5rem 1rem;
@@ -92,9 +92,10 @@
}
.open {
color: var(--color-positive);
background-color: var(--color-positive-background);
background-color: var(--color-positive-2);
}
.closed {
color: var(--color-negative);
background-color: var(--color-negative-2);
}
.replies {
src/base/projects/Issue/IssueTeaser.svelte
+5 -5
View File
@@ -30,15 +30,15 @@
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--color-foreground-background);
background-color: var(--color-foreground-1);
padding: 0.75rem 0;
}
.issue-teaser:hover {
background-color: var(--color-foreground-background-lighter);
background-color: var(--color-foreground-2);
cursor: pointer;
}
.issue-id {
color: var(--color-foreground-faded);
color: var(--color-foreground-5);
font-size: var(--font-size-tiny);
font-family: var(--font-family-monospace);
margin-left: 0.5rem;
@@ -55,7 +55,7 @@
flex-basis: 5rem;
}
.comment-count {
color: var(--color-foreground-70);
color: var(--color-foreground-4);
font-weight: var(--font-weight-bold);
}
.comment-count .emoji {
@@ -74,7 +74,7 @@
background-color: var(--color-positive);
}
.closed {
background-color: var(--color-negative-2);
background-color: var(--color-negative);
}
.summary {
display: flex;
src/base/projects/Patch.svelte
+8 -7
View File
@@ -42,7 +42,7 @@
<style>
header {
padding: 1rem;
background: var(--color-foreground-background-subtle);
background: var(--color-foreground-1);
border-radius: var(--border-radius);
}
.patch {
@@ -65,22 +65,23 @@
}
.id {
font-size: var(--font-size-tiny);
color: var(--color-foreground-faded);
color: var(--color-foreground-5);
}
.summary-state {
padding: 0.5rem 1rem;
border-radius: 1.25rem;
}
.proposed {
color: var(--color-positive);
background-color: var(--color-positive-background);
color: var(--color-positive-6);
background-color: var(--color-positive-1);
}
.draft {
color: var(--color-positive);
background-color: var(--color-positive-background);
color: var(--color-positive-6);
background-color: var(--color-positive-1);
}
.archived {
background-color: var(--color-negative-2);
color: var(--color-negative-6);
background-color: var(--color-negative-1);
}
.flex {
display: flex;
src/base/projects/Patch/PatchSideBar.svelte
+4 -4
View File
@@ -14,23 +14,23 @@
}
.metadata-section {
margin-bottom: 1rem;
border-bottom: 1px dashed var(--color-foreground-subtle);
border-bottom: 1px dashed var(--color-foreground-4);
}
.metadata-section-header {
font-size: var(--font-size-small);
margin-bottom: 0.75rem;
color: var(--color-foreground-faded);
color: var(--color-foreground-5);
}
.metadata-section-body {
margin-bottom: 1.25rem;
}
.metadata-section-empty {
color: var(--color-foreground-90);
color: var(--color-foreground-6);
}
.label {
border-radius: var(--border-radius);
color: var(--color-tertiary);
background-color: var(--color-tertiary-background);
background-color: var(--color-tertiary-2);
padding: 0.25rem 0.75rem;
margin-right: 0.5rem;
font-size: var(--font-size-small);
src/base/projects/Patch/PatchTabBar.svelte
+3 -3
View File
@@ -55,7 +55,7 @@
.revision-toggle {
border-radius: var(--border-radius-small);
border: none;
color: var(--color-foreground-80);
color: var(--color-foreground-6);
font-family: var(--font-family-monospace);
font-size: var(--font-size-tiny);
height: var(--button-tiny-height);
@@ -63,12 +63,12 @@
background-color: var(--color-background);
}
.revision-toggle:hover {
background-color: var(--color-foreground-background);
background-color: var(--color-foreground-1);
color: var(--color-foreground);
cursor: pointer;
}
.revision-toggle:disabled {
color: var(--color-foreground-faded);
color: var(--color-foreground-5);
}
</style>
src/base/projects/Patch/PatchTeaser.svelte
+5 -5
View File
@@ -30,15 +30,15 @@
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--color-foreground-background);
background-color: var(--color-foreground-1);
padding: 0.75rem 0;
}
.patch-teaser:hover {
background-color: var(--color-foreground-background-lighter);
background-color: var(--color-foreground-2);
cursor: pointer;
}
.patch-id {
color: var(--color-foreground-faded);
color: var(--color-foreground-5);
font-size: var(--font-size-tiny);
font-family: var(--font-family-monospace);
margin-left: 0.5rem;
@@ -55,7 +55,7 @@
flex-basis: 5rem;
}
.comment-count {
color: var(--color-foreground-70);
color: var(--color-foreground-4);
font-weight: var(--font-weight-bold);
}
.comment-count .emoji {
@@ -74,7 +74,7 @@
background-color: var(--color-positive);
}
.closed {
background-color: var(--color-negative-2);
background-color: var(--color-negative);
}
.summary {
display: flex;
src/base/projects/PeerSelector.svelte
+3 -3
View File
@@ -62,7 +62,7 @@
cursor: pointer;
padding: 0.5rem;
color: var(--color-secondary);
background-color: var(--color-secondary-background);
background-color: var(--color-secondary-2);
border-radius: var(--border-radius-small);
user-select: none;
}
@@ -73,7 +73,7 @@
margin: 0 0.5rem;
}
.peer:hover {
background-color: var(--color-foreground-background-lighter);
background-color: var(--color-foreground-2);
}
.stat {
display: flex;
@@ -81,7 +81,7 @@
font-family: var(--font-family-monospace);
padding: 0.5rem;
height: 2.125rem;
background: var(--color-foreground-background);
background: var(--color-foreground-1);
}
</style>
src/base/projects/ProjectMeta.svelte
+3 -3
View File
@@ -30,12 +30,12 @@
margin-bottom: 0.5rem;
}
.title .divider {
color: var(--color-foreground-subtle);
color: var(--color-foreground-4);
margin: 0 0.5rem;
font-weight: var(--font-weight-normal);
}
.title .peer-id {
color: var(--color-foreground-subtle);
color: var(--color-foreground-5);
font-weight: var(--font-weight-normal);
display: flex;
align-items: center;
@@ -48,7 +48,7 @@
.urn {
font-family: var(--font-family-monospace);
font-size: var(--font-size-tiny);
color: var(--color-foreground-faded);
color: var(--color-foreground-5);
overflow-wrap: anywhere;
display: flex;
justify-content: left;
src/base/projects/Readme.svelte
+1 -1
View File
@@ -10,7 +10,7 @@
article {
padding: 2rem;
max-width: 64rem;
background: var(--color-foreground-background-subtle);
background: var(--color-foreground-1);
border-radius: var(--border-radius);
}
</style>
src/base/projects/SourceBrowser/FileDiff.svelte
+8 -8
View File
@@ -19,7 +19,7 @@
<style>
.changeset-file {
border: 1px solid var(--color-foreground-3);
border: 1px solid var(--color-foreground-4);
border-radius: var(--border-radius-small);
min-width: var(--content-min-width);
margin-bottom: 2rem;
@@ -35,7 +35,7 @@
padding: 1rem;
}
main {
border-top: 1px dashed var(--color-foreground-3);
border-top: 1px dashed var(--color-foreground-4);
}
.changeset-file main {
overflow-x: auto;
@@ -53,9 +53,9 @@
}
.binary {
padding: 1rem;
color: var(--color-foreground-level-4);
color: var(--color-foreground-5);
text-align: center;
background-color: var(--color-foreground-1);
background-color: var(--color-foreground-2);
}
table.diff {
font-family: var(--font-family-monospace);
@@ -77,12 +77,12 @@
}
td.diff-line-number[data-type="+"],
td.diff-line-type[data-type="+"] {
background-color: var(--color-positive-background);
background-color: var(--color-positive-2);
color: var(--color-positive-6);
}
td.diff-line-number[data-type="-"],
td.diff-line-type[data-type="-"] {
background-color: var(--color-negative-background);
background-color: var(--color-negative-2);
color: var(--color-negative-6);
}
td.diff-line-number.left {
@@ -103,10 +103,10 @@
}
td.diff-expand-header {
padding-left: 0.5rem;
color: var(--color-foreground-4);
color: var(--color-foreground-5);
}
td.diff-line-number {
color: var(--color-foreground-4);
color: var(--color-foreground-5);
}
.browse {
display: flex;
src/base/projects/Tree/File.svelte
+3 -3
View File
@@ -8,7 +8,7 @@
<style>
.file {
color: var(--color-foreground-90);
color: var(--color-foreground-6);
border-radius: var(--border-radius-small);
cursor: pointer;
display: flex;
@@ -20,12 +20,12 @@
}
.file:hover {
background-color: var(--color-foreground-background);
background-color: var(--color-foreground-1);
}
.file.active {
color: var(--color-foreground) !important;
background-color: var(--color-foreground-background);
background-color: var(--color-foreground-1);
}
.spinner {
src/base/projects/Tree/Folder.svelte
+3 -3
View File
@@ -35,19 +35,19 @@
cursor: pointer;
padding: 0.25rem;
margin: 0.125rem 0;
color: var(--color-foreground-level-6);
color: var(--color-foreground-6);
user-select: none;
line-height: 1.5rem;
white-space: nowrap;
}
.folder:hover {
background-color: var(--color-foreground-background);
background-color: var(--color-foreground-1);
border-radius: var(--border-radius-small);
}
.folder-name {
margin-left: 0.25rem;
color: var(--color-light);
color: var(--color-secondary-6);
}
.container {
src/base/projects/Widget.svelte
+5 -4
View File
@@ -24,7 +24,7 @@
flex-direction: row;
justify-content: space-between;
padding: 1rem;
border: 1px solid var(--color-secondary-faded);
border: 1px solid var(--color-secondary-5);
border-radius: var(--border-radius-small);
min-width: 36rem;
cursor: pointer;
@@ -57,7 +57,7 @@
white-space: nowrap;
}
article.project-faded {
border: 1px dashed var(--color-foreground-subtle);
border: 1px dashed var(--color-foreground-4);
cursor: not-allowed;
}
.activity {
@@ -66,12 +66,13 @@
}
article:hover {
border-color: var(--color-secondary);
background-color: var(--color-secondary-1);
}
article:hover .activity {
display: none !important;
}
article.project-faded:hover {
border-color: var(--color-foreground-faded);
border-color: var(--color-foreground-5);
}
article .id {
font-size: var(--font-size-regular);
@@ -98,7 +99,7 @@
}
article .id .urn {
visibility: hidden;
color: var(--color-foreground-faded);
color: var(--color-foreground-5);
font-weight: var(--font-weight-normal);
font-family: var(--font-family-monospace);
font-size: var(--font-size-tiny);
src/base/seeds/View.svelte
+2 -2
View File
@@ -62,13 +62,13 @@
align-items: center;
}
.signed-in {
color: var(--color-foreground-faded);
color: var(--color-foreground-5);
margin-right: 0.5rem;
}
.session-info {
display: flex;
flex-direction: row;
background: var(--color-secondary-background);
background: var(--color-secondary-2);
padding: 0.25rem 0.5rem;
border-radius: var(--border-radius);
}
src/project.ts
+3 -1
View File
@@ -398,7 +398,9 @@ export class Project implements ProjectInfo {
async getBlob(
commit: string,
path: string,
options: { highlight: boolean },
options:
| { highlight: false }
| { highlight: true; theme: "base16-ocean.dark" | "base16-ocean.light" },
): Promise<Blob> {
return new Request(
`projects/${this.urn}/blob/${commit}/${path}`,