├── .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 | 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 |
18 |
19 | Documentation 20 |
21 |
22 | 23 | Send IPC 24 |
25 |
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 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 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 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | --------------------------------------------------------------------------------