Mirror/rayhunter
1
0
Fork 0
mirror of https://github.com/EFForg/rayhunter.git synced 2026-06-03 19:53:33 -07:00
Code Issues Packages Projects Releases Wiki Activity

upgrade tailwind

Browse Source 
* moved to vite plugin for tailwind (it's recommended now)
* removed autoprefixer (v4 uses its own CSS thing now)
* postcss.config.js was used to wire up tailwind and autoprefixer, so
  it's gone
* tailwind.config.ts is gone, because v4 stores config in app.css using
  css variables
* fixed some renamed classes
This commit is contained in:
Markus Unterwaditzer
2026-04-24 01:42:33 +02:00
committed by Brad Warren
parent fe69dd1abf
commit 177262bc1d
15 changed files with 369 additions and 1058 deletions
Download Patch File Download Diff File Expand all files Collapse all files
daemon/web/package-lock.json
Generated
+315 -999
View File
File diff suppressed because it is too large Load Diff
daemon/web/package.json
+2 -2
View File
@@ -20,9 +20,9 @@
"@sveltejs/adapter-static": "^3.0.5", "@sveltejs/adapter-static": "^3.0.5",
"@sveltejs/kit": "^2.58.0", "@sveltejs/kit": "^2.58.0",
"@sveltejs/vite-plugin-svelte": "^7.0.0", "@sveltejs/vite-plugin-svelte": "^7.0.0",
"@tailwindcss/vite": "^4.2.2",
"@types/eslint": "^9.6.0", "@types/eslint": "^9.6.0",
"@types/node": "^25.6.0", "@types/node": "^25.6.0",
"autoprefixer": "^10.5.0",
"eslint": "^10.2.1", "eslint": "^10.2.1",
"eslint-config-prettier": "^10.1.8", "eslint-config-prettier": "^10.1.8",
"eslint-plugin-svelte": "^3.17.1", "eslint-plugin-svelte": "^3.17.1",
@@ -31,7 +31,7 @@
"prettier-plugin-svelte": "^3.5.1", "prettier-plugin-svelte": "^3.5.1",
"svelte": "^5.55.5", "svelte": "^5.55.5",
"svelte-check": "^4.4.6", "svelte-check": "^4.4.6",
"tailwindcss": "^3.4.18", "tailwindcss": "^4.2.2",
"typescript": "^6.0.3", "typescript": "^6.0.3",
"typescript-eslint": "^8.59.0", "typescript-eslint": "^8.59.0",
"vite": "^8.0.10", "vite": "^8.0.10",
daemon/web/postcss.config.js
-6
View File
@@ -1,6 +0,0 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
daemon/web/src/app.css
+20 -3
View File
@@ -1,3 +1,20 @@
@import 'tailwindcss/base'; @import 'tailwindcss';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities'; @theme {
--color-rayhunter-blue: #4e4eb1;
--color-rayhunter-dark-blue: #3f3da0;
--color-rayhunter-green: #94ea18;
}
/* Preserve Tailwind v3's default border / divide color (gray-200) so the
* v4 upgrade does not visually change every bare `border` / `divide-x` in
* the codebase. Without this, those utilities use `currentColor` in v4. */
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentColor);
}
}
daemon/web/src/lib/components/ActionErrors.svelte
+1 -1
View File
@@ -20,7 +20,7 @@
{#if action_errors.length > 0} {#if action_errors.length > 0}
<div <div
class="bg-red-100 border-red-100 drop-shadow p-4 flex flex-col gap-2 class="bg-red-100 border-red-100 drop-shadow-sm p-4 flex flex-col gap-2
border rounded-md flex-1 justify-between fixed z-10 right-3 bottom-3 ml-3" border rounded-md flex-1 justify-between fixed z-10 right-3 bottom-3 ml-3"
> >
<div class="flex flex-row justify-between"> <div class="flex flex-row justify-between">
daemon/web/src/lib/components/ClockDriftAlert.svelte
+1 -1
View File
@@ -55,7 +55,7 @@
{#if show_alert} {#if show_alert}
<div <div
class="bg-yellow-100 border-yellow-400 drop-shadow p-4 flex flex-col gap-2 border rounded-md" class="bg-yellow-100 border-yellow-400 drop-shadow-sm p-4 flex flex-col gap-2 border rounded-md"
> >
<span class="text-xl font-bold flex flex-row items-center gap-2 text-yellow-700"> <span class="text-xl font-bold flex flex-row items-center gap-2 text-yellow-700">
<svg <svg
daemon/web/src/lib/components/ConfigForm.svelte
+16 -16
View File
@@ -164,7 +164,7 @@
<select <select
id="ui_level" id="ui_level"
bind:value={config.ui_level} bind:value={config.ui_level}
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-rayhunter-blue" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-hidden focus:ring-2 focus:ring-rayhunter-blue"
> >
<option value={0}>0 - Invisible mode</option> <option value={0}>0 - Invisible mode</option>
<option value={1}>1 - Subtle mode (colored line)</option> <option value={1}>1 - Subtle mode (colored line)</option>
@@ -188,7 +188,7 @@
<select <select
id="key_input_mode" id="key_input_mode"
bind:value={config.key_input_mode} bind:value={config.key_input_mode}
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-rayhunter-blue" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-hidden focus:ring-2 focus:ring-rayhunter-blue"
> >
<option value={0}>0 - Disable button control</option> <option value={0}>0 - Disable button control</option>
<option value={1}>1 - Double-tap power button to start new recording</option <option value={1}>1 - Double-tap power button to start new recording</option
@@ -202,7 +202,7 @@
id="colorblind_mode" id="colorblind_mode"
type="checkbox" type="checkbox"
bind:checked={config.colorblind_mode} bind:checked={config.colorblind_mode}
class="h-4 w-4 text-rayhunter-blue focus:ring-rayhunter-blue border-gray-300 rounded" class="h-4 w-4 text-rayhunter-blue focus:ring-rayhunter-blue border-gray-300 rounded-sm"
/> />
<label for="colorblind_mode" class="ml-2 block text-sm text-gray-700"> <label for="colorblind_mode" class="ml-2 block text-sm text-gray-700">
Colorblind Mode Colorblind Mode
@@ -221,7 +221,7 @@
id="ntfy_url" id="ntfy_url"
type="url" type="url"
bind:value={config.ntfy_url} bind:value={config.ntfy_url}
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-rayhunter-blue" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-hidden focus:ring-2 focus:ring-rayhunter-blue"
/> />
<p class="text-xs text-gray-500 mt-1"> <p class="text-xs text-gray-500 mt-1">
Test button below uses the saved configuration URL, not the input above Test button below uses the saved configuration URL, not the input above
@@ -259,7 +259,7 @@
</button> </button>
{#if testMessage} {#if testMessage}
<div <div
class="mt-2 p-2 rounded text-sm {testMessageType === 'error' class="mt-2 p-2 rounded-sm text-sm {testMessageType === 'error'
? 'bg-red-100 text-red-700' ? 'bg-red-100 text-red-700'
: 'bg-green-100 text-green-700'}" : 'bg-green-100 text-green-700'}"
> >
@@ -318,7 +318,7 @@
type="number" type="number"
min="1" min="1"
bind:value={config.min_space_to_start_recording_mb} bind:value={config.min_space_to_start_recording_mb}
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-rayhunter-blue" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-hidden focus:ring-2 focus:ring-rayhunter-blue"
/> />
<p class="text-xs text-gray-500 mt-1"> <p class="text-xs text-gray-500 mt-1">
Recording will not start if less than this amount of disk space is free Recording will not start if less than this amount of disk space is free
@@ -337,7 +337,7 @@
type="number" type="number"
min="1" min="1"
bind:value={config.min_space_to_continue_recording_mb} bind:value={config.min_space_to_continue_recording_mb}
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-rayhunter-blue" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-hidden focus:ring-2 focus:ring-rayhunter-blue"
/> />
<p class="text-xs text-gray-500 mt-1"> <p class="text-xs text-gray-500 mt-1">
Recording will stop automatically if disk space drops below this level Recording will stop automatically if disk space drops below this level
@@ -567,7 +567,7 @@
id="imsi_requested" id="imsi_requested"
type="checkbox" type="checkbox"
bind:checked={config.analyzers.imsi_requested} bind:checked={config.analyzers.imsi_requested}
class="h-4 w-4 text-rayhunter-blue focus:ring-rayhunter-blue border-gray-300 rounded" class="h-4 w-4 text-rayhunter-blue focus:ring-rayhunter-blue border-gray-300 rounded-sm"
/> />
<label for="imsi_requested" class="ml-2 block text-sm text-gray-700"> <label for="imsi_requested" class="ml-2 block text-sm text-gray-700">
IMSI Requested Heuristic IMSI Requested Heuristic
@@ -579,7 +579,7 @@
id="connection_redirect_2g_downgrade" id="connection_redirect_2g_downgrade"
type="checkbox" type="checkbox"
bind:checked={config.analyzers.connection_redirect_2g_downgrade} bind:checked={config.analyzers.connection_redirect_2g_downgrade}
class="h-4 w-4 text-rayhunter-blue focus:ring-rayhunter-blue border-gray-300 rounded" class="h-4 w-4 text-rayhunter-blue focus:ring-rayhunter-blue border-gray-300 rounded-sm"
/> />
<label <label
for="connection_redirect_2g_downgrade" for="connection_redirect_2g_downgrade"
@@ -594,7 +594,7 @@
id="lte_sib6_and_7_downgrade" id="lte_sib6_and_7_downgrade"
type="checkbox" type="checkbox"
bind:checked={config.analyzers.lte_sib6_and_7_downgrade} bind:checked={config.analyzers.lte_sib6_and_7_downgrade}
class="h-4 w-4 text-rayhunter-blue focus:ring-rayhunter-blue border-gray-300 rounded" class="h-4 w-4 text-rayhunter-blue focus:ring-rayhunter-blue border-gray-300 rounded-sm"
/> />
<label <label
for="lte_sib6_and_7_downgrade" for="lte_sib6_and_7_downgrade"
@@ -609,7 +609,7 @@
id="null_cipher" id="null_cipher"
type="checkbox" type="checkbox"
bind:checked={config.analyzers.null_cipher} bind:checked={config.analyzers.null_cipher}
class="h-4 w-4 text-rayhunter-blue focus:ring-rayhunter-blue border-gray-300 rounded" class="h-4 w-4 text-rayhunter-blue focus:ring-rayhunter-blue border-gray-300 rounded-sm"
/> />
<label for="null_cipher" class="ml-2 block text-sm text-gray-700"> <label for="null_cipher" class="ml-2 block text-sm text-gray-700">
Null Cipher Heuristic Null Cipher Heuristic
@@ -621,7 +621,7 @@
id="nas_null_cipher" id="nas_null_cipher"
type="checkbox" type="checkbox"
bind:checked={config.analyzers.nas_null_cipher} bind:checked={config.analyzers.nas_null_cipher}
class="h-4 w-4 text-rayhunter-blue focus:ring-rayhunter-blue border-gray-300 rounded" class="h-4 w-4 text-rayhunter-blue focus:ring-rayhunter-blue border-gray-300 rounded-sm"
/> />
<label for="nas_null_cipher" class="ml-2 block text-sm text-gray-700"> <label for="nas_null_cipher" class="ml-2 block text-sm text-gray-700">
NAS Null Cipher Heuristic NAS Null Cipher Heuristic
@@ -633,7 +633,7 @@
id="incomplete_sib" id="incomplete_sib"
type="checkbox" type="checkbox"
bind:checked={config.analyzers.incomplete_sib} bind:checked={config.analyzers.incomplete_sib}
class="h-4 w-4 text-rayhunter-blue focus:ring-rayhunter-blue border-gray-300 rounded" class="h-4 w-4 text-rayhunter-blue focus:ring-rayhunter-blue border-gray-300 rounded-sm"
/> />
<label for="incomplete_sib" class="ml-2 block text-sm text-gray-700"> <label for="incomplete_sib" class="ml-2 block text-sm text-gray-700">
Incomplete SIB Heuristic Incomplete SIB Heuristic
@@ -645,7 +645,7 @@
id="test_analyzer" id="test_analyzer"
type="checkbox" type="checkbox"
bind:checked={config.analyzers.test_analyzer} bind:checked={config.analyzers.test_analyzer}
class="h-4 w-4 text-rayhunter-blue focus:ring-rayhunter-blue border-gray-300 rounded" class="h-4 w-4 text-rayhunter-blue focus:ring-rayhunter-blue border-gray-300 rounded-sm"
/> />
<label for="test_analyzer" class="ml-2 block text-sm text-gray-700"> <label for="test_analyzer" class="ml-2 block text-sm text-gray-700">
Test Heuristic (noisy!) Test Heuristic (noisy!)
@@ -656,7 +656,7 @@
id="diagnostic_analyzer" id="diagnostic_analyzer"
type="checkbox" type="checkbox"
bind:checked={config.analyzers.diagnostic_analyzer} bind:checked={config.analyzers.diagnostic_analyzer}
class="h-4 w-4 text-rayhunter-blue focus:ring-rayhunter-blue border-gray-300 rounded" class="h-4 w-4 text-rayhunter-blue focus:ring-rayhunter-blue border-gray-300 rounded-sm"
/> />
<label <label
for="diagnostic_analyzer" for="diagnostic_analyzer"
@@ -700,7 +700,7 @@
</form> </form>
{#if message} {#if message}
<div <div
class="mt-4 p-3 rounded {messageType === 'error' class="mt-4 p-3 rounded-sm {messageType === 'error'
? 'bg-red-100 text-red-700' ? 'bg-red-100 text-red-700'
: 'bg-green-100 text-green-700'}" : 'bg-green-100 text-green-700'}"
> >
daemon/web/src/lib/components/ManifestCard.svelte
+2 -2
View File
@@ -44,7 +44,7 @@
</script> </script>
<div <div
class="{status_row_color} {status_border_color} drop-shadow p-4 flex flex-col gap-2 border rounded-md flex-1 overflow-x-auto overflow-y-hidden" class="{status_row_color} {status_border_color} drop-shadow-sm p-4 flex flex-col gap-2 border rounded-md flex-1 overflow-x-auto overflow-y-hidden"
> >
{#if current} {#if current}
<div class="flex flex-row justify-between gap-2"> <div class="flex flex-row justify-between gap-2">
@@ -82,7 +82,7 @@
> >
</div> </div>
{#if entry.stop_reason} {#if entry.stop_reason}
<div class="bg-yellow-50 border border-yellow-300 rounded p-2 text-yellow-800 text-sm"> <div class="bg-yellow-50 border border-yellow-300 rounded-sm p-2 text-yellow-800 text-sm">
{entry.stop_reason} {entry.stop_reason}
</div> </div>
{/if} {/if}
daemon/web/src/lib/components/ManifestTable.svelte
+1 -1
View File
@@ -16,7 +16,7 @@
{#if $screenIsLgUp} {#if $screenIsLgUp}
<table class="table-auto text-left table"> <table class="table-auto text-left table">
<thead> <thead>
<tr class="bg-gray-100 drop-shadow"> <tr class="bg-gray-100 drop-shadow-sm">
<th class="p-2" scope="col">ID</th> <th class="p-2" scope="col">ID</th>
<th class="p-2" scope="col">Started</th> <th class="p-2" scope="col">Started</th>
<th class="p-2" scope="col">Last Message</th> <th class="p-2" scope="col">Last Message</th>
daemon/web/src/lib/components/ManifestTableRow.svelte
+1 -1
View File
@@ -36,7 +36,7 @@
} }
</script> </script>
<tr class="{status_row_color} drop-shadow"> <tr class="{status_row_color} drop-shadow-sm">
<td class="p-2">{entry.name}</td> <td class="p-2">{entry.name}</td>
<td class="p-2">{date_formatter.format(entry.start_time)}</td> <td class="p-2">{date_formatter.format(entry.start_time)}</td>
<td class="p-2" <td class="p-2"
daemon/web/src/lib/components/Modal.svelte
+1 -1
View File
@@ -35,7 +35,7 @@
{#if shown} {#if shown}
<div <div
class="fixed left-5 right-5 top-5 bottom-5 z-50 bg-white border border-white rounded-md class="fixed left-5 right-5 top-5 bottom-5 z-50 bg-white border border-white rounded-md
flex flex-col p-2 drop-shadow" flex flex-col p-2 drop-shadow-sm"
> >
<div class="flex justify-between items-center p-1"> <div class="flex justify-between items-center p-1">
<span class="text-2xl">{title}</span> <span class="text-2xl">{title}</span>
daemon/web/src/lib/components/SystemStatsTable.svelte
+1 -1
View File
@@ -36,7 +36,7 @@
</script> </script>
<div <div
class="flex-1 drop-shadow p-4 flex flex-col gap-2 border rounded-md bg-gray-100 border-gray-100" class="flex-1 drop-shadow-sm p-4 flex flex-col gap-2 border rounded-md bg-gray-100 border-gray-100"
> >
<p class="text-xl mb-2">System Information</p> <p class="text-xl mb-2">System Information</p>
<table class="table-auto border"> <table class="table-auto border">
daemon/web/src/routes/+page.svelte
+6 -4
View File
@@ -57,7 +57,9 @@
<LogView bind:shown={logview_shown} /> <LogView bind:shown={logview_shown} />
<ConfigForm bind:shown={config_shown} /> <ConfigForm bind:shown={config_shown} />
<div class="p-4 xl:px-8 bg-rayhunter-blue drop-shadow flex flex-row justify-between items-center"> <div
class="p-4 xl:px-8 bg-rayhunter-blue drop-shadow-sm flex flex-row justify-between items-center"
>
<!-- https://www.w3.org/WAI/tutorials/images/decorative/ --> <!-- https://www.w3.org/WAI/tutorials/images/decorative/ -->
<img src="/rayhunter_text.png" alt="" class="h-10 xl:h-12" /> <img src="/rayhunter_text.png" alt="" class="h-10 xl:h-12" />
<div class="flex flex-row gap-4"> <div class="flex flex-row gap-4">
@@ -204,7 +206,7 @@
<div class="m-4 xl:mx-8 flex flex-col gap-4"> <div class="m-4 xl:mx-8 flex flex-col gap-4">
{#if update_error !== undefined} {#if update_error !== undefined}
<div <div
class="bg-red-100 border-red-100 drop-shadow p-4 flex flex-col gap-2 border rounded-md flex-1 justify-between" class="bg-red-100 border-red-100 drop-shadow-sm p-4 flex flex-col gap-2 border rounded-md flex-1 justify-between"
> >
<span class="text-2xl font-bold mb-2 flex flex-row items-center gap-2 text-red-600"> <span class="text-2xl font-bold mb-2 flex flex-row items-center gap-2 text-red-600">
<svg <svg
@@ -249,7 +251,7 @@
/> />
{:else} {:else}
<div <div
class="bg-red-100 border-red-100 drop-shadow p-4 flex flex-col gap-2 border rounded-md flex-1 justify-between" class="bg-red-100 border-red-100 drop-shadow-sm p-4 flex flex-col gap-2 border rounded-md flex-1 justify-between"
> >
<span <span
class="text-2xl font-bold mb-2 flex flex-row items-center gap-2 text-red-600" class="text-2xl font-bold mb-2 flex flex-row items-center gap-2 text-red-600"
@@ -295,7 +297,7 @@
type="checkbox" type="checkbox"
id="filter_threshold" id="filter_threshold"
bind:checked={filter_threshold} bind:checked={filter_threshold}
class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-rayhunter-blue" class="px-3 py-2 border border-gray-300 rounded-md focus:outline-hidden focus:ring-2 focus:ring-rayhunter-blue"
/> />
</div> </div>
</div> </div>
daemon/web/tailwind.config.ts
-19
View File
@@ -1,19 +0,0 @@
import type { Config } from 'tailwindcss';
import { breakpoints } from './src/theme';
export default {
content: ['./src/**/*.{html,js,svelte,ts}'],
theme: {
extend: {
colors: {
'rayhunter-blue': '#4e4eb1',
'rayhunter-dark-blue': '#3f3da0',
'rayhunter-green': '#94ea18',
},
screens: breakpoints,
},
},
plugins: [],
} as Config;
daemon/web/vite.config.ts
+2 -1
View File
@@ -1,5 +1,6 @@
import { defineConfig } from 'vitest/config'; import { defineConfig } from 'vitest/config';
import { sveltekit } from '@sveltejs/kit/vite'; import { sveltekit } from '@sveltejs/kit/vite';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({ export default defineConfig({
server: { server: {
@@ -26,7 +27,7 @@ export default defineConfig({
}, },
}, },
}, },
plugins: [sveltekit()], plugins: [tailwindcss(), sveltekit()],
build: { build: {
// Force everything into one HTML file. SvelteKit will still generate // Force everything into one HTML file. SvelteKit will still generate
// a lot of JS files but they are deadweight and will not be included // a lot of JS files but they are deadweight and will not be included