schoolbox web extension :)
style: format
+36
-38
+1
-1
.prettierrc.json
+1
-1
.prettierrc.json
···
3
3
"bracketSameLine": true,
4
4
"plugins": ["prettier-plugin-svelte", "prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"],
5
5
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
6
-
"tailwindStylesheet": "./src/entrypoints/app.css"
6
+
"tailwindStylesheet": "./src/entrypoints/popup/app.css"
7
7
}
+2
-2
src/entrypoints/popup/App.svelte
+2
-2
src/entrypoints/popup/App.svelte
···
46
46
</script>
47
47
48
48
<main
49
-
class="bg-ctp-base flex flex-col items-center p-6 {globalSettings.state.themeFlavour}"
49
+
class="flex flex-col items-center bg-ctp-base p-6 {globalSettings.state.themeFlavour}"
50
50
style="--ctp-accent: {accentRgb}">
51
-
<nav class="text-ctp-text mb-4 flex rounded-xl px-4 py-2" id="navbar">
51
+
<nav class="mb-4 flex rounded-xl px-4 py-2 text-ctp-text" id="navbar">
52
52
<a href="#/" class="navbutton-left" use:active={{ className: "active" }}>Settings</a>
53
53
<a href="#/plugins" class="navbutton-center" use:active={{ className: "active" }}>Plugins</a>
54
54
<a href="#/themes" class="navbutton-center" use:active={{ className: "active" }}>Themes</a>
+11
-11
src/entrypoints/popup/app.css
+11
-11
src/entrypoints/popup/app.css
···
5
5
6
6
body {
7
7
width: 450px; /* max: 1000px */
8
-
@apply bg-ctp-base text-ctp-text font-lexend text-base;
8
+
@apply bg-ctp-base font-lexend text-base text-ctp-text;
9
9
}
10
10
11
11
@theme {
···
27
27
mask: var(--icon) no-repeat;
28
28
mask-size: 100% 100%;
29
29
background-color: currentColor;
30
-
@apply text-(--ctp-accent) h-16 w-20;
30
+
@apply h-16 w-20 text-(--ctp-accent);
31
31
}
32
32
33
33
.slider {
34
-
@apply bg-ctp-surface1 after:bg-ctp-text peer-checked:after:bg-ctp-mantle peer-checked:bg-(--ctp-accent) ml-4 flex h-5 w-11 flex-shrink-0 items-center rounded-lg p-1 duration-500 ease-in-out after:rounded-lg after:shadow-md after:duration-300 group-hover:after:translate-x-1 peer-checked:after:translate-x-6;
34
+
@apply ml-4 flex h-5 w-11 flex-shrink-0 items-center rounded-lg bg-ctp-surface1 p-1 duration-500 ease-in-out peer-checked:bg-(--ctp-accent) after:rounded-lg after:bg-ctp-text after:shadow-md after:duration-300 group-hover:after:translate-x-1 peer-checked:after:translate-x-6 peer-checked:after:bg-ctp-mantle;
35
35
}
36
36
37
37
.slider.big {
···
59
59
}
60
60
61
61
#card {
62
-
@apply bg-ctp-mantle bg-linear-to-b outline-(--ctp-accent) outline-solid flex w-full flex-col items-center justify-center rounded-3xl p-6 shadow-xl outline-2;
62
+
@apply flex w-full flex-col items-center justify-center rounded-3xl bg-ctp-mantle bg-linear-to-b p-6 shadow-xl outline-2 outline-(--ctp-accent) outline-solid;
63
63
}
64
64
65
65
#card h1 {
66
-
@apply from-ctp-blue to-ctp-teal bg-linear-to-r bg-clip-text text-5xl font-bold text-transparent;
66
+
@apply bg-linear-to-r from-ctp-blue to-ctp-teal bg-clip-text text-5xl font-bold text-transparent;
67
67
68
68
&.ctp {
69
69
background-image: linear-gradient(
···
79
79
}
80
80
81
81
#card h2 {
82
-
@apply text-(--ctp-accent) text-4xl font-semibold;
82
+
@apply text-4xl font-semibold text-(--ctp-accent);
83
83
}
84
84
85
85
#card h3 {
···
95
95
}
96
96
97
97
button#toggle {
98
-
@apply text-ctp-base rounded-xl px-4 py-2 text-xl font-bold;
98
+
@apply rounded-xl px-4 py-2 text-xl font-bold text-ctp-base;
99
99
}
100
100
101
101
button.small {
···
123
123
}
124
124
125
125
.navbutton-left {
126
-
@apply outline-ctp-overlay2/10 outline-solid hover:bg-(--ctp-accent)/50 active:bg-(--ctp-accent)/80 rounded-l-xl py-2 pl-4 pr-2 outline-1;
126
+
@apply rounded-l-xl py-2 pr-2 pl-4 outline-1 outline-ctp-overlay2/10 outline-solid hover:bg-(--ctp-accent)/50 active:bg-(--ctp-accent)/80;
127
127
}
128
128
129
129
.navbutton-center {
130
-
@apply outline-ctp-overlay2/10 outline-solid hover:bg-(--ctp-accent)/50 active:bg-(--ctp-accent)/80 p-2 outline-1;
130
+
@apply p-2 outline-1 outline-ctp-overlay2/10 outline-solid hover:bg-(--ctp-accent)/50 active:bg-(--ctp-accent)/80;
131
131
}
132
132
133
133
.navbutton-right {
134
-
@apply outline-ctp-overlay2/10 outline-solid hover:bg-(--ctp-accent)/50 active:bg-(--ctp-accent)/80 rounded-r-xl py-2 pl-2 pr-4 outline-1;
134
+
@apply rounded-r-xl py-2 pr-4 pl-2 outline-1 outline-ctp-overlay2/10 outline-solid hover:bg-(--ctp-accent)/50 active:bg-(--ctp-accent)/80;
135
135
}
136
136
137
137
div[title] {
···
139
139
}
140
140
141
141
div[title]:hover::after {
142
-
@apply bg-ctp-surface0 text-ctp-text absolute bottom-full left-1/2 whitespace-nowrap;
142
+
@apply absolute bottom-full left-1/2 bg-ctp-surface0 whitespace-nowrap text-ctp-text;
143
143
content: attr(title);
144
144
transform: translateX(-50%);
145
145
padding: 0.5rem;
+1
-1
src/entrypoints/popup/components/Banner.svelte
+1
-1
src/entrypoints/popup/components/Banner.svelte
···
4
4
5
5
{#if visible}
6
6
<button
7
-
class="banner bg-ctp-blue text-ctp-crust mb-4 flex w-full cursor-pointer items-center justify-center gap-2 rounded-lg p-4"
7
+
class="banner mb-4 flex w-full cursor-pointer items-center justify-center gap-2 rounded-lg bg-ctp-blue p-4 text-ctp-crust"
8
8
{onclick}>
9
9
{@render children()}
10
10
<p>{message}</p>
+2
-2
src/entrypoints/popup/components/Modal.svelte
+2
-2
src/entrypoints/popup/components/Modal.svelte
···
15
15
onclick={(e) => {
16
16
if (e.target === dialog) dialog.close();
17
17
}}
18
-
class="bg-ctp-base text-ctp-text open:animate-zoom-in relative m-auto rounded-lg backdrop:backdrop-blur-md">
19
-
<button autofocus onclick={() => dialog?.close()} class="small bg-ctp-surface1 absolute right-0 top-0 m-2"
18
+
class="relative m-auto rounded-lg bg-ctp-base text-ctp-text backdrop:backdrop-blur-md open:animate-zoom-in">
19
+
<button autofocus onclick={() => dialog?.close()} class="small absolute top-0 right-0 m-2 bg-ctp-surface1"
20
20
><X /></button>
21
21
22
22
<div class="p-4">
+1
-1
src/entrypoints/popup/components/Motd.svelte
+1
-1
src/entrypoints/popup/components/Motd.svelte
···
12
12
</script>
13
13
14
14
<!-- MOTD -->
15
-
<div class="text-ctp-subtext0 text-center italic">
15
+
<div class="text-center text-ctp-subtext0 italic">
16
16
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
17
17
<p>{@html motd.state.motd}</p>
18
18
<!-- Free and <a href='https://github.com/schooltape/schooltape' class='text-(--ctp-accent)'> open source</a>! -->
+1
-1
src/entrypoints/popup/components/Title.svelte
+1
-1
src/entrypoints/popup/components/Title.svelte
···
10
10
let { update, title = "", checked }: Props = $props();
11
11
</script>
12
12
13
-
<label for="theme-toggle" class="text-ctp-text group relative flex items-center justify-between p-2 text-xl">
13
+
<label for="theme-toggle" class="group relative flex items-center justify-between p-2 text-xl text-ctp-text">
14
14
<h2>{title}</h2>
15
15
<Toggle id="theme-toggle" size="big" {checked} {update} />
16
16
</label>
+1
-1
src/entrypoints/popup/components/inputs/Button.svelte
+1
-1
src/entrypoints/popup/components/inputs/Button.svelte
···
12
12
let { children, title, id, onclick, classList = "text-ctp-text hover:bg-ctp-surface1" }: Props = $props();
13
13
</script>
14
14
15
-
<button {title} {id} class="bg-ctp-surface0 small flex h-8 cursor-pointer items-center gap-3 {classList}" {onclick}>
15
+
<button {title} {id} class="small flex h-8 cursor-pointer items-center gap-3 bg-ctp-surface0 {classList}" {onclick}>
16
16
{@render children()}
17
17
</button>
+2
-2
src/entrypoints/popup/components/inputs/Slider.svelte
+2
-2
src/entrypoints/popup/components/inputs/Slider.svelte
···
15
15
16
16
<div class="mt-4 space-y-2">
17
17
{#if name}
18
-
<label for={id} class="text-ctp-text block">{name}</label>
18
+
<label for={id} class="block text-ctp-text">{name}</label>
19
19
{/if}
20
20
<div class="flex items-center gap-4">
21
21
<input
···
34
34
{max}
35
35
{value}
36
36
class="styled-slider slider-progress" />
37
-
<span id={id + "-value"} class="text-ctp-text text-sm font-medium">{currentValue}</span>
37
+
<span id={id + "-value"} class="text-sm font-medium text-ctp-text">{currentValue}</span>
38
38
</div>
39
39
{#if description}
40
40
<p class="text-ctp-overlay1">{description}</p>
+2
-2
src/entrypoints/popup/components/inputs/TextInput.svelte
+2
-2
src/entrypoints/popup/components/inputs/TextInput.svelte
···
11
11
</script>
12
12
13
13
<div class="flex w-full items-center justify-center">
14
-
<input {id} class="bg-ctp-surface0 text-ctp-text w-full rounded-l-xl p-2" bind:value {placeholder} type="text" />
15
-
<button class="text-ctp-crust bg-(--ctp-accent) rounded-r-xl p-2" type="submit" {onclick}>{label}</button>
14
+
<input {id} class="w-full rounded-l-xl bg-ctp-surface0 p-2 text-ctp-text" bind:value {placeholder} type="text" />
15
+
<button class="rounded-r-xl bg-(--ctp-accent) p-2 text-ctp-crust" type="submit" {onclick}>{label}</button>
16
16
</div>
+2
-2
src/entrypoints/popup/components/inputs/Toggle.svelte
+2
-2
src/entrypoints/popup/components/inputs/Toggle.svelte
···
14
14
let { update, checked, id, size = "big", text = "", description = "", children }: Props = $props();
15
15
</script>
16
16
17
-
<label class="text-ctp-text group relative flex cursor-pointer items-center justify-between py-2">
17
+
<label class="group relative flex cursor-pointer items-center justify-between py-2 text-ctp-text">
18
18
<h4 class="text-ctp-text">{text}</h4>
19
19
<input
20
20
{id}
···
29
29
</label>
30
30
31
31
<div
32
-
class="text-ctp-overlay1 group-hover:text-ctp-subtext0 flex items-center justify-between transition-colors duration-500 ease-in-out">
32
+
class="flex items-center justify-between text-ctp-overlay1 transition-colors duration-500 ease-in-out group-hover:text-ctp-subtext0">
33
33
<div>{description}</div>
34
34
<div>{@render children?.()}</div>
35
35
</div>
+3
-3
src/entrypoints/popup/routes/Snippets.svelte
+3
-3
src/entrypoints/popup/routes/Snippets.svelte
···
60
60
{/each}
61
61
</div>
62
62
<div class="w-full">
63
-
<h3 class="text-ctp-text my-4">User Snippets</h3>
64
-
<p class="text-ctp-overlay2 mb-4">
63
+
<h3 class="my-4 text-ctp-text">User Snippets</h3>
64
+
<p class="mb-4 text-ctp-overlay2">
65
65
To learn how to make your own snippets, please read the
66
66
<a
67
67
class="text-ctp-blue hover:underline"
···
95
95
await globalSettings.storage.setValue(settings);
96
96
}}>Remove</button>
97
97
<a href={snippet.url} target="_blank"
98
-
><button class="xsmall hover:text-ctp-mantle hover:bg-(--ctp-accent)">Gist</button></a>
98
+
><button class="xsmall hover:bg-(--ctp-accent) hover:text-ctp-mantle">Gist</button></a>
99
99
</div>
100
100
{/each}
101
101
</div>
+2
-2
src/entrypoints/popup/routes/Themes.svelte
+2
-2
src/entrypoints/popup/routes/Themes.svelte
···
48
48
globalSettings.set({ themeLogo: logoId as LogoId });
49
49
}}
50
50
class:highlight={globalSettings.state.themeLogo === logoId}
51
-
class="border-(--ctp-accent) flex flex-col rounded-lg border p-2">
51
+
class="flex flex-col rounded-lg border border-(--ctp-accent) p-2">
52
52
<span>{logo.name}</span>
53
53
{#if logo.disable !== true}
54
54
<div class="flex h-full w-full items-center justify-center">
···
84
84
globalSettings.set({ themes: toggled });
85
85
}} />
86
86
87
-
<div id="flavours" class="text-ctp-text my-6 flex rounded-xl py-2">
87
+
<div id="flavours" class="my-6 flex rounded-xl py-2 text-ctp-text">
88
88
{#each flavours as flavour (flavour)}
89
89
<button
90
90
class:active={globalSettings.state.themeFlavour === flavour}
+1
-3
src/utils/storage/plugins.ts
+1
-3
src/utils/storage/plugins.ts
···
88
88
89
89
export const plugins = buildPluginsFromConfig(pluginConfig);
90
90
91
-
function buildPluginsFromConfig(
92
-
config: Record<string, Types.PluginConfig>,
93
-
): Record<Types.PluginId, Types.PluginData> {
91
+
function buildPluginsFromConfig(config: Record<string, Types.PluginConfig>): Record<Types.PluginId, Types.PluginData> {
94
92
const plugins: Partial<Record<Types.PluginId, Types.PluginData>> = {};
95
93
96
94
for (const [pluginId, pluginConfig] of Object.entries(config)) {