├── .gitignore
├── .vscode
├── extensions.json
├── settings.json
└── launch.json
├── resources
└── icon.png
├── .prettierignore
├── src
├── renderer
│ ├── src
│ │ ├── env.d.ts
│ │ ├── main.ts
│ │ ├── components
│ │ │ └── Versions.svelte
│ │ ├── App.svelte
│ │ └── assets
│ │ │ ├── base.css
│ │ │ ├── wavy-lines.svg
│ │ │ ├── main.css
│ │ │ └── electron.svg
│ └── index.html
├── preload
│ ├── index.d.ts
│ └── index.ts
└── main
│ └── index.ts
├── dev-app-update.yml
├── tsconfig.json
├── .npmrc
├── .editorconfig
├── .prettierrc.yaml
├── svelte.config.mjs
├── tsconfig.node.json
├── electron.vite.config.ts
├── tsconfig.web.json
├── eslint.config.mjs
├── README.md
├── electron-builder.yml
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | out
4 | .DS_Store
5 | .eslintcache
6 | *.log*
7 |
--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | "recommendations": ["dbaeumer.vscode-eslint"]
3 | }
4 |
--------------------------------------------------------------------------------
/resources/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xland/redredstar/HEAD/resources/icon.png
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | out
2 | dist
3 | pnpm-lock.yaml
4 | LICENSE.md
5 | tsconfig.json
6 | tsconfig.*.json
7 |
--------------------------------------------------------------------------------
/src/renderer/src/env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 |
--------------------------------------------------------------------------------
/dev-app-update.yml:
--------------------------------------------------------------------------------
1 | provider: generic
2 | url: https://example.com/auto-updates
3 | updaterCacheDirName: redredstar-updater
4 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "files": [],
3 | "references": [{ "path": "./tsconfig.node.json" }, { "path": "./tsconfig.web.json" }]
4 | }
5 |
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | electron_mirror=https://npmmirror.com/mirrors/electron/
2 | electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
3 |
--------------------------------------------------------------------------------
/src/preload/index.d.ts:
--------------------------------------------------------------------------------
1 | import { ElectronAPI } from '@electron-toolkit/preload'
2 |
3 | declare global {
4 | interface Window {
5 | electron: ElectronAPI
6 | api: unknown
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
--------------------------------------------------------------------------------
/.prettierrc.yaml:
--------------------------------------------------------------------------------
1 | singleQuote: true
2 | semi: false
3 | printWidth: 100
4 | trailingComma: none
5 | plugins:
6 | - prettier-plugin-svelte
7 | overrides:
8 | - files: '*.svelte'
9 | options:
10 | parser: svelte
11 |
--------------------------------------------------------------------------------
/src/renderer/src/main.ts:
--------------------------------------------------------------------------------
1 | import { mount } from 'svelte'
2 |
3 | import './assets/main.css'
4 |
5 | import App from './App.svelte'
6 |
7 | const app = mount(App, {
8 | target: document.getElementById('app')!
9 | })
10 |
11 | export default app
12 |
--------------------------------------------------------------------------------
/svelte.config.mjs:
--------------------------------------------------------------------------------
1 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
2 |
3 | export default {
4 | // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
5 | // for more information about preprocessors
6 | preprocess: vitePreprocess()
7 | }
8 |
--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@electron-toolkit/tsconfig/tsconfig.node.json",
3 | "include": ["electron.vite.config.*", "src/main/**/*", "src/preload/**/*"],
4 | "compilerOptions": {
5 | "composite": true,
6 | "types": ["electron-vite/node"]
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/src/renderer/src/components/Versions.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | - Electron v{versions.electron}
7 | - Chromium v{versions.chrome}
8 | - Node v{versions.node}
9 |
10 |
--------------------------------------------------------------------------------
/electron.vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
2 | import { svelte } from '@sveltejs/vite-plugin-svelte'
3 |
4 | export default defineConfig({
5 | main: {
6 | plugins: [externalizeDepsPlugin()]
7 | },
8 | preload: {
9 | plugins: [externalizeDepsPlugin()]
10 | },
11 | renderer: {
12 | plugins: [svelte()]
13 | }
14 | })
15 |
--------------------------------------------------------------------------------
/tsconfig.web.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@electron-toolkit/tsconfig/tsconfig.web.json",
3 | "include": [
4 | "src/renderer/src/env.d.ts",
5 | "src/renderer/src/**/*",
6 | "src/renderer/src/**/*.svelte",
7 | "src/preload/*.d.ts"
8 | ],
9 | "compilerOptions": {
10 | "verbatimModuleSyntax": true,
11 | "useDefineForClassFields": true,
12 | "strict": false,
13 | "allowJs": true,
14 | "checkJs": true,
15 | "lib": ["ESNext", "DOM", "DOM.Iterable"]
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "[typescript]": {
3 | "editor.defaultFormatter": "esbenp.prettier-vscode"
4 | },
5 | "[javascript]": {
6 | "editor.defaultFormatter": "esbenp.prettier-vscode"
7 | },
8 | "[json]": {
9 | "editor.defaultFormatter": "esbenp.prettier-vscode"
10 | },
11 | "[svelte]": {
12 | "editor.defaultFormatter": "svelte.svelte-vscode"
13 | },
14 | "svelte.enable-ts-plugin": true,
15 | "eslint.validate": [
16 | "javascript",
17 | "javascriptreact",
18 | "svelte"
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/src/renderer/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Electron
6 |
7 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/preload/index.ts:
--------------------------------------------------------------------------------
1 | import { contextBridge } from 'electron'
2 | import { electronAPI } from '@electron-toolkit/preload'
3 |
4 | // Custom APIs for renderer
5 | const api = {}
6 |
7 | // Use `contextBridge` APIs to expose Electron APIs to
8 | // renderer only if context isolation is enabled, otherwise
9 | // just add to the DOM global.
10 | if (process.contextIsolated) {
11 | try {
12 | contextBridge.exposeInMainWorld('electron', electronAPI)
13 | contextBridge.exposeInMainWorld('api', api)
14 | } catch (error) {
15 | console.error(error)
16 | }
17 | } else {
18 | // @ts-ignore (define in dts)
19 | window.electron = electronAPI
20 | // @ts-ignore (define in dts)
21 | window.api = api
22 | }
23 |
--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | import tseslint from '@electron-toolkit/eslint-config-ts'
2 | import eslintConfigPrettier from '@electron-toolkit/eslint-config-prettier'
3 | import eslintPluginSvelte from 'eslint-plugin-svelte'
4 |
5 | export default tseslint.config(
6 | { ignores: ['**/node_modules', '**/dist', '**/out'] },
7 | tseslint.configs.recommended,
8 | eslintPluginSvelte.configs['flat/recommended'],
9 | {
10 | files: ['**/*.svelte'],
11 | languageOptions: {
12 | parserOptions: {
13 | parser: tseslint.parser
14 | }
15 | }
16 | },
17 | {
18 | files: ['**/*.{tsx,svelte}'],
19 | rules: {
20 | 'svelte/no-unused-svelte-ignore': 'off'
21 | }
22 | },
23 | eslintConfigPrettier
24 | )
25 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # redredstar
2 |
3 | An Electron application with Svelte and TypeScript
4 |
5 | ## Recommended IDE Setup
6 |
7 | - [VSCode](https://code.visualstudio.com/) + [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) + [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)
8 |
9 | ## Project Setup
10 |
11 | ### Install
12 |
13 | ```bash
14 | $ npm install
15 | ```
16 |
17 | ### Development
18 |
19 | ```bash
20 | $ npm run dev
21 | ```
22 |
23 | ### Build
24 |
25 | ```bash
26 | # For windows
27 | $ npm run build:win
28 |
29 | # For macOS
30 | $ npm run build:mac
31 |
32 | # For Linux
33 | $ npm run build:linux
34 | ```
35 |
--------------------------------------------------------------------------------
/src/renderer/src/App.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 | Powered by electron-vite
10 |
11 | Build an Electron app with
12 | Svelte
13 | and
14 | TypeScript
15 |
16 | Please try pressing F12 to open the devTool
17 |
26 |
27 |
--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": "0.2.0",
3 | "configurations": [
4 | {
5 | "name": "Debug Main Process",
6 | "type": "node",
7 | "request": "launch",
8 | "cwd": "${workspaceRoot}",
9 | "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite",
10 | "windows": {
11 | "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite.cmd"
12 | },
13 | "runtimeArgs": ["--sourcemap"],
14 | "env": {
15 | "REMOTE_DEBUGGING_PORT": "9222"
16 | }
17 | },
18 | {
19 | "name": "Debug Renderer Process",
20 | "port": 9222,
21 | "request": "attach",
22 | "type": "chrome",
23 | "webRoot": "${workspaceFolder}/src/renderer",
24 | "timeout": 60000,
25 | "presentation": {
26 | "hidden": true
27 | }
28 | }
29 | ],
30 | "compounds": [
31 | {
32 | "name": "Debug All",
33 | "configurations": ["Debug Main Process", "Debug Renderer Process"],
34 | "presentation": {
35 | "order": 1
36 | }
37 | }
38 | ]
39 | }
40 |
--------------------------------------------------------------------------------
/electron-builder.yml:
--------------------------------------------------------------------------------
1 | appId: com.electron.app
2 | productName: redredstar
3 | directories:
4 | buildResources: build
5 | files:
6 | - '!**/.vscode/*'
7 | - '!src/*'
8 | - '!electron.vite.config.{js,ts,mjs,cjs}'
9 | - '!svelte.config.mjs'
10 | - '!{.eslintcache,eslint.config.mjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}'
11 | - '!{.env,.env.*,.npmrc,pnpm-lock.yaml}'
12 | - '!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}'
13 | asarUnpack:
14 | - resources/**
15 | win:
16 | executableName: redredstar
17 | nsis:
18 | artifactName: ${name}-${version}-setup.${ext}
19 | shortcutName: ${productName}
20 | uninstallDisplayName: ${productName}
21 | createDesktopShortcut: always
22 | mac:
23 | entitlementsInherit: build/entitlements.mac.plist
24 | extendInfo:
25 | - NSCameraUsageDescription: Application requests access to the device's camera.
26 | - NSMicrophoneUsageDescription: Application requests access to the device's microphone.
27 | - NSDocumentsFolderUsageDescription: Application requests access to the user's Documents folder.
28 | - NSDownloadsFolderUsageDescription: Application requests access to the user's Downloads folder.
29 | notarize: false
30 | dmg:
31 | artifactName: ${name}-${version}.${ext}
32 | linux:
33 | target:
34 | - AppImage
35 | - snap
36 | - deb
37 | maintainer: electronjs.org
38 | category: Utility
39 | appImage:
40 | artifactName: ${name}-${version}.${ext}
41 | npmRebuild: false
42 | publish:
43 | provider: generic
44 | url: https://example.com/auto-updates
45 | electronDownload:
46 | mirror: https://npmmirror.com/mirrors/electron/
47 |
--------------------------------------------------------------------------------
/src/renderer/src/assets/base.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --ev-c-white: #ffffff;
3 | --ev-c-white-soft: #f8f8f8;
4 | --ev-c-white-mute: #f2f2f2;
5 |
6 | --ev-c-black: #1b1b1f;
7 | --ev-c-black-soft: #222222;
8 | --ev-c-black-mute: #282828;
9 |
10 | --ev-c-gray-1: #515c67;
11 | --ev-c-gray-2: #414853;
12 | --ev-c-gray-3: #32363f;
13 |
14 | --ev-c-text-1: rgba(255, 255, 245, 0.86);
15 | --ev-c-text-2: rgba(235, 235, 245, 0.6);
16 | --ev-c-text-3: rgba(235, 235, 245, 0.38);
17 |
18 | --ev-button-alt-border: transparent;
19 | --ev-button-alt-text: var(--ev-c-text-1);
20 | --ev-button-alt-bg: var(--ev-c-gray-3);
21 | --ev-button-alt-hover-border: transparent;
22 | --ev-button-alt-hover-text: var(--ev-c-text-1);
23 | --ev-button-alt-hover-bg: var(--ev-c-gray-2);
24 | }
25 |
26 | :root {
27 | --color-background: var(--ev-c-black);
28 | --color-background-soft: var(--ev-c-black-soft);
29 | --color-background-mute: var(--ev-c-black-mute);
30 |
31 | --color-text: var(--ev-c-text-1);
32 | }
33 |
34 | *,
35 | *::before,
36 | *::after {
37 | box-sizing: border-box;
38 | margin: 0;
39 | font-weight: normal;
40 | }
41 |
42 | ul {
43 | list-style: none;
44 | }
45 |
46 | body {
47 | min-height: 100vh;
48 | color: var(--color-text);
49 | background: var(--color-background);
50 | line-height: 1.6;
51 | font-family:
52 | Inter,
53 | -apple-system,
54 | BlinkMacSystemFont,
55 | 'Segoe UI',
56 | Roboto,
57 | Oxygen,
58 | Ubuntu,
59 | Cantarell,
60 | 'Fira Sans',
61 | 'Droid Sans',
62 | 'Helvetica Neue',
63 | sans-serif;
64 | text-rendering: optimizeLegibility;
65 | -webkit-font-smoothing: antialiased;
66 | -moz-osx-font-smoothing: grayscale;
67 | }
68 |
--------------------------------------------------------------------------------
/src/renderer/src/assets/wavy-lines.svg:
--------------------------------------------------------------------------------
1 |
26 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "redredstar",
3 | "version": "1.0.0",
4 | "description": "An Electron application with Svelte and TypeScript",
5 | "main": "./out/main/index.js",
6 | "author": "example.com",
7 | "homepage": "https://electron-vite.org",
8 | "scripts": {
9 | "format": "prettier --plugin prettier-plugin-svelte --write .",
10 | "lint": "eslint --cache .",
11 | "typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false",
12 | "svelte-check": "svelte-check --tsconfig ./tsconfig.json",
13 | "typecheck": "npm run typecheck:node && npm run svelte-check",
14 | "start": "electron-vite preview",
15 | "dev": "electron-vite dev",
16 | "build": "npm run typecheck && electron-vite build",
17 | "postinstall": "electron-builder install-app-deps",
18 | "build:unpack": "npm run build && electron-builder --dir",
19 | "build:win": "npm run build && electron-builder --win",
20 | "build:mac": "npm run build && electron-builder --mac",
21 | "build:linux": "npm run build && electron-builder --linux"
22 | },
23 | "dependencies": {
24 | "@electron-toolkit/preload": "^3.0.2",
25 | "@electron-toolkit/utils": "^4.0.0",
26 | "electron-updater": "^6.3.9"
27 | },
28 | "devDependencies": {
29 | "@electron-toolkit/eslint-config-prettier": "^3.0.0",
30 | "@electron-toolkit/eslint-config-ts": "^3.0.0",
31 | "@electron-toolkit/tsconfig": "^1.0.1",
32 | "@sveltejs/vite-plugin-svelte": "^6.1.0",
33 | "@types/node": "^22.16.5",
34 | "electron": "^37.2.3",
35 | "electron-builder": "^25.1.8",
36 | "electron-vite": "^4.0.0",
37 | "eslint": "^9.31.0",
38 | "eslint-plugin-svelte": "^3.11.0",
39 | "prettier": "^3.6.2",
40 | "prettier-plugin-svelte": "^3.4.0",
41 | "svelte": "^5.36.10",
42 | "svelte-check": "^4.3.0",
43 | "typescript": "^5.8.3",
44 | "vite": "^7.0.5"
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/main/index.ts:
--------------------------------------------------------------------------------
1 | import { app, shell, BrowserWindow, ipcMain } from 'electron'
2 | import { join } from 'path'
3 | import { electronApp, optimizer, is } from '@electron-toolkit/utils'
4 | import icon from '../../resources/icon.png?asset'
5 |
6 | function createWindow(): void {
7 | // Create the browser window.
8 | const mainWindow = new BrowserWindow({
9 | width: 900,
10 | height: 670,
11 | show: false,
12 | autoHideMenuBar: true,
13 | ...(process.platform === 'linux' ? { icon } : {}),
14 | webPreferences: {
15 | preload: join(__dirname, '../preload/index.js'),
16 | sandbox: false
17 | }
18 | })
19 |
20 | mainWindow.on('ready-to-show', () => {
21 | mainWindow.show()
22 | })
23 |
24 | mainWindow.webContents.setWindowOpenHandler((details) => {
25 | shell.openExternal(details.url)
26 | return { action: 'deny' }
27 | })
28 |
29 | // HMR for renderer base on electron-vite cli.
30 | // Load the remote URL for development or the local html file for production.
31 | if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
32 | mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
33 | } else {
34 | mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
35 | }
36 | }
37 |
38 | // This method will be called when Electron has finished
39 | // initialization and is ready to create browser windows.
40 | // Some APIs can only be used after this event occurs.
41 | app.whenReady().then(() => {
42 | // Set app user model id for windows
43 | electronApp.setAppUserModelId('com.electron')
44 |
45 | // Default open or close DevTools by F12 in development
46 | // and ignore CommandOrControl + R in production.
47 | // see https://github.com/alex8088/electron-toolkit/tree/master/packages/utils
48 | app.on('browser-window-created', (_, window) => {
49 | optimizer.watchWindowShortcuts(window)
50 | })
51 |
52 | // IPC test
53 | ipcMain.on('ping', () => console.log('pong'))
54 |
55 | createWindow()
56 |
57 | app.on('activate', function () {
58 | // On macOS it's common to re-create a window in the app when the
59 | // dock icon is clicked and there are no other windows open.
60 | if (BrowserWindow.getAllWindows().length === 0) createWindow()
61 | })
62 | })
63 |
64 | // Quit when all windows are closed, except on macOS. There, it's common
65 | // for applications and their menu bar to stay active until the user quits
66 | // explicitly with Cmd + Q.
67 | app.on('window-all-closed', () => {
68 | if (process.platform !== 'darwin') {
69 | app.quit()
70 | }
71 | })
72 |
73 | // In this file you can include the rest of your app's specific main process
74 | // code. You can also put them in separate files and require them here.
75 |
--------------------------------------------------------------------------------
/src/renderer/src/assets/main.css:
--------------------------------------------------------------------------------
1 | @import './base.css';
2 |
3 | body {
4 | display: flex;
5 | align-items: center;
6 | justify-content: center;
7 | overflow: hidden;
8 | background-image: url('./wavy-lines.svg');
9 | background-size: cover;
10 | user-select: none;
11 | }
12 |
13 | code {
14 | font-weight: 600;
15 | padding: 3px 5px;
16 | border-radius: 2px;
17 | background-color: var(--color-background-mute);
18 | font-family:
19 | ui-monospace,
20 | SFMono-Regular,
21 | SF Mono,
22 | Menlo,
23 | Consolas,
24 | Liberation Mono,
25 | monospace;
26 | font-size: 85%;
27 | }
28 |
29 | #app {
30 | display: flex;
31 | align-items: center;
32 | justify-content: center;
33 | flex-direction: column;
34 | margin-bottom: 80px;
35 | }
36 |
37 | .logo {
38 | margin-bottom: 20px;
39 | -webkit-user-drag: none;
40 | height: 128px;
41 | width: 128px;
42 | will-change: filter;
43 | transition: filter 300ms;
44 | }
45 |
46 | .logo:hover {
47 | filter: drop-shadow(0 0 1.2em #6988e6aa);
48 | }
49 |
50 | .creator {
51 | font-size: 14px;
52 | line-height: 16px;
53 | color: var(--ev-c-text-2);
54 | font-weight: 600;
55 | margin-bottom: 10px;
56 | }
57 |
58 | .text {
59 | font-size: 28px;
60 | color: var(--ev-c-text-1);
61 | font-weight: 700;
62 | line-height: 32px;
63 | text-align: center;
64 | margin: 0 10px;
65 | padding: 16px 0;
66 | }
67 |
68 | .tip {
69 | font-size: 16px;
70 | line-height: 24px;
71 | color: var(--ev-c-text-2);
72 | font-weight: 600;
73 | }
74 |
75 | .svelte {
76 | background: -webkit-linear-gradient(315deg, #ff3e00 35%, #647eff);
77 | background-clip: text;
78 | -webkit-background-clip: text;
79 | -webkit-text-fill-color: transparent;
80 | font-weight: 700;
81 | }
82 |
83 | .ts {
84 | background: -webkit-linear-gradient(315deg, #3178c6 45%, #f0dc4e);
85 | background-clip: text;
86 | -webkit-background-clip: text;
87 | -webkit-text-fill-color: transparent;
88 | font-weight: 700;
89 | }
90 |
91 | .actions {
92 | display: flex;
93 | padding-top: 32px;
94 | margin: -6px;
95 | flex-wrap: wrap;
96 | justify-content: flex-start;
97 | }
98 |
99 | .action {
100 | flex-shrink: 0;
101 | padding: 6px;
102 | }
103 |
104 | .action a {
105 | cursor: pointer;
106 | text-decoration: none;
107 | display: inline-block;
108 | border: 1px solid transparent;
109 | text-align: center;
110 | font-weight: 600;
111 | white-space: nowrap;
112 | border-radius: 20px;
113 | padding: 0 20px;
114 | line-height: 38px;
115 | font-size: 14px;
116 | border-color: var(--ev-button-alt-border);
117 | color: var(--ev-button-alt-text);
118 | background-color: var(--ev-button-alt-bg);
119 | }
120 |
121 | .action a:hover {
122 | border-color: var(--ev-button-alt-hover-border);
123 | color: var(--ev-button-alt-hover-text);
124 | background-color: var(--ev-button-alt-hover-bg);
125 | }
126 |
127 | .versions {
128 | position: absolute;
129 | bottom: 30px;
130 | margin: 0 auto;
131 | padding: 15px 0;
132 | font-family: 'Menlo', 'Lucida Console', monospace;
133 | display: inline-flex;
134 | overflow: hidden;
135 | align-items: center;
136 | border-radius: 22px;
137 | background-color: #202127;
138 | backdrop-filter: blur(24px);
139 | }
140 |
141 | .versions li {
142 | display: block;
143 | float: left;
144 | border-right: 1px solid var(--ev-c-gray-1);
145 | padding: 0 20px;
146 | font-size: 14px;
147 | line-height: 14px;
148 | opacity: 0.8;
149 | &:last-child {
150 | border: none;
151 | }
152 | }
153 |
154 | @media (max-width: 720px) {
155 | .text {
156 | font-size: 20px;
157 | }
158 | }
159 |
160 | @media (max-width: 620px) {
161 | .versions {
162 | display: none;
163 | }
164 | }
165 |
166 | @media (max-width: 350px) {
167 | .tip,
168 | .actions {
169 | display: none;
170 | }
171 | }
172 |
--------------------------------------------------------------------------------
/src/renderer/src/assets/electron.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------