mirror of
https://github.com/an-anime-team/an-anime-game-launcher.git
synced 2025-03-17 21:50:11 +03:00
1.7.0
- added dark theme (add themes system at all) From 1.6.1 preparations: - fixed default runner installation - disabled dxvk cache auto-deletion - added wineserver env to winetricks - added cabextract requirement - added roadmap goal (issue #35) - fixed issue with incorrect wine version unpacking - added temp unpacking notification to progress bar because for some reasons it lags a bit - removed excess locales
This commit is contained in:
parent
0c34cc947f
commit
51e15e3760
33 changed files with 549 additions and 525 deletions
|
@ -14,7 +14,7 @@
|
|||
|
||||
| Game version | Launcher version | Patch version |
|
||||
| :---: | :---: | :---: |
|
||||
| 2.3.0 | 1.6.0 | 2.3.0 testing ⚠️ |
|
||||
| 2.3.0 | 1.7.0 | 2.3.0 stable ✅ |
|
||||
|
||||
We have our own [An Anime Game](https://discord.gg/ck37X6UWBp) discord server where you can ask any questions
|
||||
|
||||
|
@ -130,10 +130,10 @@ npm start
|
|||
* <s>Add winetricks auto-downloading when new prefix creates so it is no longer required</s> *(1.6.0)*
|
||||
* <s>DXVK logs auto-deletion option</s> *(1.6.0)*
|
||||
* <s>Add default wine version to download</s> (Proton-6.20-GE-1) *(1.6.0)*
|
||||
* Add winetricks and winecfg buttons to settings
|
||||
* Add dark theme support for settings menu
|
||||
* <s>Add dark theme support for settings menu</s> *(1.7.0)*
|
||||
* Add winetricks and winecfg buttons to settings ([issue 35](https://notabug.org/nobody/an-anime-game-launcher/issues/35))
|
||||
* Fix button flickering at start when the launcher's state updates
|
||||
* Wine prefix folder selection *(symlinks?)*
|
||||
* Wine prefix folder selection *(symlinks?)* ([issue 37](https://notabug.org/nobody/an-anime-game-launcher/issues/37))
|
||||
* Game's update pre-installation
|
||||
* Screenshots explorer
|
||||
* Make force launch button when the launcher's repository is unavailable *(waiting for the repository's unavailability lmao)*
|
||||
|
|
5
entry.js
5
entry.js
|
@ -4,7 +4,8 @@ const {
|
|||
ipcMain,
|
||||
Notification,
|
||||
shell,
|
||||
nativeImage
|
||||
nativeImage,
|
||||
nativeTheme
|
||||
} = require('electron');
|
||||
|
||||
const path = require('path');
|
||||
|
@ -22,6 +23,8 @@ ipcMain.on('notification', (event, args) => {
|
|||
new Notification(args).show();
|
||||
});
|
||||
|
||||
ipcMain.on('is-window-dark', (e) => e.returnValue = nativeTheme.shouldUseDarkColors);
|
||||
|
||||
ipcMain.handle('open-settings', () => {
|
||||
const settingsWindow = new BrowserWindow ({
|
||||
width: 900,
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "an-anime-game-launcher",
|
||||
"version": "1.6.0",
|
||||
"version": "1.7.0",
|
||||
"description": "An Anime Game Linux Launcher",
|
||||
"author": "Nikita Podvirnyy <suimin.tu.mu.ga.mi@gmail.com>",
|
||||
"contributors": [
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
<title i18id="AnalyticsTitle">Yanfei's commission...</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body theme="light">
|
||||
<div class="header">
|
||||
<img src="../images/yanfei.png">
|
||||
|
||||
|
|
|
@ -16,7 +16,9 @@
|
|||
<title>An Anime Game Linux Launcher</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body theme="light">
|
||||
<img class="background">
|
||||
|
||||
<div id="downloader-panel" class="dark" style="display: none">
|
||||
<div id="downloader-label">
|
||||
<span id="downloaded">Downloading</span>
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
<title i18id="SettingsTitle">Settings</title>
|
||||
</head>
|
||||
|
||||
<body class="body">
|
||||
<body theme="light">
|
||||
<div class="menu">
|
||||
<div class="menu-item menu-item-active" anchor="general" i18id="General">General</div>
|
||||
<div class="menu-item" anchor="enhancements" i18id="Enhancements">Enhancements</div>
|
||||
|
@ -52,7 +52,7 @@
|
|||
<li value="vi-vn">Tiếng Việt (Vietnamese)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="selected-item">
|
||||
<span>English (US)</span>
|
||||
|
||||
|
@ -73,7 +73,7 @@
|
|||
<li value="ko-kr">한국어 (Korean)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="selected-item hint--top hint--medium">
|
||||
<span>English (US)</span>
|
||||
|
||||
|
@ -91,7 +91,7 @@
|
|||
<li value="default">Default</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="selected-item">
|
||||
<span>Default</span>
|
||||
|
||||
|
@ -101,19 +101,21 @@
|
|||
|
||||
<br>
|
||||
|
||||
<div class="checkbox" id="discord-rpc">
|
||||
Discord RPC
|
||||
<div class="select" id="theme">
|
||||
<span i18id="Theme">Theme</span>
|
||||
|
||||
<div class="checkbox-mark">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="45.701px" height="45.7px" viewBox="0 0 45.701 45.7" xml:space="preserve"><g><g><path d="M20.687,38.332c-2.072,2.072-5.434,2.072-7.505,0L1.554,26.704c-2.072-2.071-2.072-5.433,0-7.504 c2.071-2.072,5.433-2.072,7.505,0l6.928,6.927c0.523,0.522,1.372,0.522,1.896,0L36.642,7.368c2.071-2.072,5.433-2.072,7.505,0 c0.995,0.995,1.554,2.345,1.554,3.752c0,1.407-0.559,2.757-1.554,3.752L20.687,38.332z"/></g></g></svg>
|
||||
<div class="select-options">
|
||||
<ul>
|
||||
<li value="light" i18id="Light">Light</li>
|
||||
<li value="dark" i18id="Dark">Dark</li>
|
||||
<li value="system" i18id="System">System</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkbox" id="darkmode">
|
||||
Dark Mode
|
||||
<div class="selected-item">
|
||||
<span>System</span>
|
||||
|
||||
<div class="checkbox-mark">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="45.701px" height="45.7px" viewBox="0 0 45.701 45.7" xml:space="preserve"><g><g><path d="M20.687,38.332c-2.072,2.072-5.434,2.072-7.505,0L1.554,26.704c-2.072-2.071-2.072-5.433,0-7.504 c2.071-2.072,5.433-2.072,7.505,0l6.928,6.927c0.523,0.522,1.372,0.522,1.896,0L36.642,7.368c2.071-2.072,5.433-2.072,7.505,0 c0.995,0.995,1.554,2.345,1.554,3.752c0,1.407-0.559,2.757-1.554,3.752L20.687,38.332z"/></g></g></svg>
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 330.002 330.002" xml:space="preserve"><path d="M233.252,155.997L120.752,6.001c-4.972-6.628-14.372-7.97-21-3c-6.628,4.971-7.971,14.373-3,21 l105.75,140.997L96.752,306.001c-4.971,6.627-3.627,16.03,3,21c2.698,2.024,5.856,3.001,8.988,3.001 c4.561,0,9.065-2.072,12.012-6.001l112.5-150.004C237.252,168.664,237.252,161.33,233.252,155.997z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -133,7 +135,7 @@
|
|||
<li value="mangohud">MangoHud</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="selected-item">
|
||||
<span>None</span>
|
||||
|
||||
|
@ -160,10 +162,18 @@
|
|||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="45.701px" height="45.7px" viewBox="0 0 45.701 45.7" xml:space="preserve"><g><g><path d="M20.687,38.332c-2.072,2.072-5.434,2.072-7.505,0L1.554,26.704c-2.072-2.071-2.072-5.433,0-7.504 c2.071-2.072,5.433-2.072,7.505,0l6.928,6.927c0.523,0.522,1.372,0.522,1.896,0L36.642,7.368c2.071-2.072,5.433-2.072,7.505,0 c0.995,0.995,1.554,2.345,1.554,3.752c0,1.407-0.559,2.757-1.554,3.752L20.687,38.332z"/></g></g></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="checkbox" id="discord-rpc">
|
||||
Discord RPC
|
||||
|
||||
<div class="checkbox-mark">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="45.701px" height="45.7px" viewBox="0 0 45.701 45.7" xml:space="preserve"><g><g><path d="M20.687,38.332c-2.072,2.072-5.434,2.072-7.505,0L1.554,26.704c-2.072-2.071-2.072-5.433,0-7.504 c2.071-2.072,5.433-2.072,7.505,0l6.928,6.927c0.523,0.522,1.372,0.522,1.896,0L36.642,7.368c2.071-2.072,5.433-2.072,7.505,0 c0.995,0.995,1.554,2.345,1.554,3.752c0,1.407-0.559,2.757-1.554,3.752L20.687,38.332z"/></g></g></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<div class="settings-item" id="runners">
|
||||
|
|
|
@ -6,6 +6,10 @@
|
|||
"Language": "Sprache",
|
||||
"Voice": "Sprachpaket",
|
||||
"VoiceNotification": "Für diese Funktion müssen Sie das neue Sprachpaket manuell im Spiel auswählen.",
|
||||
"Theme": "Farbschema",
|
||||
"Light": "Hell",
|
||||
"Dark": "Dunkel",
|
||||
"System": "System",
|
||||
"PreInstallationRequired": "Vorinstallation erförderlich",
|
||||
"ToggleShadersText": "Verwenden Sie die Home-Taste (POS 1), um Shader im Spiel ein/aus-zuschalten",
|
||||
"Shaders": "Shadern",
|
||||
|
|
|
@ -6,6 +6,10 @@
|
|||
"Language": "Language",
|
||||
"Voice": "Voice Pack",
|
||||
"VoiceNotification": "This feature requires you to manually select the new voice pack in the game",
|
||||
"Theme": "Theme",
|
||||
"Light": "Light",
|
||||
"Dark": "Dark",
|
||||
"System": "System",
|
||||
"PreInstallationRequired": "pre-installation required",
|
||||
"ToggleShadersText": "Use Home button to toggle shaders in the game",
|
||||
"Shaders": "Shaders",
|
||||
|
|
|
@ -6,6 +6,10 @@
|
|||
"Language": "Language",
|
||||
"Voice": "Voice Pack",
|
||||
"VoiceNotification": "This feature requires you to manually select the new voice pack in the game",
|
||||
"Theme": "Theme",
|
||||
"Light": "Light",
|
||||
"Dark": "Dark",
|
||||
"System": "System",
|
||||
"PreInstallationRequired": "pre-installation required",
|
||||
"ToggleShadersText": "Use Home button to toggle shaders in the game",
|
||||
"Shaders": "Shaders",
|
||||
|
|
|
@ -6,6 +6,10 @@
|
|||
"Language": "Language",
|
||||
"Voice": "Voice Pack",
|
||||
"VoiceNotification": "This feature requires you to manually select the new voice pack in the game",
|
||||
"Theme": "Theme",
|
||||
"Light": "Light",
|
||||
"Dark": "Dark",
|
||||
"System": "System",
|
||||
"PreInstallationRequired": "pre-installation required",
|
||||
"ToggleShadersText": "Use Home button to toggle shaders in the game",
|
||||
"Shaders": "Shaders",
|
||||
|
|
|
@ -6,6 +6,10 @@
|
|||
"Language": "Language",
|
||||
"Voice": "Voice Pack",
|
||||
"VoiceNotification": "This feature requires you to manually select the new voice pack in the game",
|
||||
"Theme": "Theme",
|
||||
"Light": "Light",
|
||||
"Dark": "Dark",
|
||||
"System": "System",
|
||||
"PreInstallationRequired": "pre-installation required",
|
||||
"ToggleShadersText": "Use Home button to toggle shaders in the game",
|
||||
"Shaders": "Shaders",
|
||||
|
|
|
@ -6,6 +6,10 @@
|
|||
"Language": "Bahasa",
|
||||
"Voice": "Paket Suara",
|
||||
"VoiceNotification": "Fitur ini memerlukan kamu untuk memilih paket suara baru di dalam Game",
|
||||
"Theme": "Theme",
|
||||
"Light": "Light",
|
||||
"Dark": "Dark",
|
||||
"System": "System",
|
||||
"PreInstallationRequired": "pra-pemasangan dibutuhkan",
|
||||
"ToggleShadersText": "Gunakan tombol Home untuk menyalakan/mematikan shader di dalam Game",
|
||||
"Shaders": "Shader",
|
||||
|
|
|
@ -6,6 +6,10 @@
|
|||
"Language": "言語",
|
||||
"Voice": "ボイスパック",
|
||||
"VoiceNotification": "この機能を使用するには、ゲーム内の新しいボイスパックを手動で選択する必要があります",
|
||||
"Theme": "テーマ",
|
||||
"Light": "ライト",
|
||||
"Dark": "暗い",
|
||||
"System": "システム",
|
||||
"PreInstallationRequired": "事前インストールが必要",
|
||||
"ToggleShadersText": "ホームボタンを使用してゲーム内のシェーダを切り替えます",
|
||||
"Shaders": "シェーダ",
|
||||
|
|
|
@ -6,6 +6,10 @@
|
|||
"Language": "언어",
|
||||
"Voice": "음성 팩",
|
||||
"VoiceNotification": "이 기능을 사용하려면 게임에서 새 음성 팩을 수동으로 선택해야합니다",
|
||||
"Theme": "테마",
|
||||
"Light": "빛",
|
||||
"Dark": "어두운",
|
||||
"System": "시스템",
|
||||
"PreInstallationRequired": "사전 설치 필요",
|
||||
"ToggleShadersText": "홈 버튼을 사용하여 게임에서 쉐이더를 전환하십시오",
|
||||
"Shaders": "쉐이더",
|
||||
|
|
|
@ -6,6 +6,10 @@
|
|||
"Language": "Language",
|
||||
"Voice": "Voice Pack",
|
||||
"VoiceNotification": "This feature requires you to manually select the new voice pack in the game",
|
||||
"Theme": "Theme",
|
||||
"Light": "Light",
|
||||
"Dark": "Dark",
|
||||
"System": "System",
|
||||
"PreInstallationRequired": "pre-installation required",
|
||||
"ToggleShadersText": "Use Home button to toggle shaders in the game",
|
||||
"Shaders": "Shaders",
|
||||
|
|
|
@ -6,6 +6,10 @@
|
|||
"Language": "Язык",
|
||||
"Voice": "Озвучка",
|
||||
"VoiceNotification": "Эта настройка требует ручного переключения языка озвучки в настройках игры",
|
||||
"Theme": "Тема",
|
||||
"Light": "Светлая",
|
||||
"Dark": "Тёмная",
|
||||
"System": "Системная",
|
||||
"PreInstallationRequired": "требуется предустановка",
|
||||
"ToggleShadersText": "Используйте кнопку Home для переключения шейдеров в игре",
|
||||
"Shaders": "Шейдеры",
|
||||
|
|
|
@ -6,6 +6,10 @@
|
|||
"Language": "Language",
|
||||
"Voice": "Voice Pack",
|
||||
"VoiceNotification": "This feature requires you to manually select the new voice pack in the game",
|
||||
"Theme": "Theme",
|
||||
"Light": "Light",
|
||||
"Dark": "Dark",
|
||||
"System": "System",
|
||||
"PreInstallationRequired": "pre-installation required",
|
||||
"ToggleShadersText": "Use Home button to toggle shaders in the game",
|
||||
"Shaders": "Shaders",
|
||||
|
|
|
@ -6,6 +6,10 @@
|
|||
"Language": "Language",
|
||||
"Voice": "Voice Pack",
|
||||
"VoiceNotification": "This feature requires you to manually select the new voice pack in the game",
|
||||
"Theme": "Theme",
|
||||
"Light": "Light",
|
||||
"Dark": "Dark",
|
||||
"System": "System",
|
||||
"PreInstallationRequired": "pre-installation required",
|
||||
"ToggleShadersText": "Use Home button to toggle shaders in the game",
|
||||
"Shaders": "Shaders",
|
||||
|
|
|
@ -6,6 +6,10 @@
|
|||
"Language": "语言",
|
||||
"Voice": "语音包",
|
||||
"VoiceNotification": "This feature requires you to manually select the new voice pack in the game",
|
||||
"Theme": "Theme",
|
||||
"Light": "Light",
|
||||
"Dark": "Dark",
|
||||
"System": "System",
|
||||
"PreInstallationRequired": "pre-installation required",
|
||||
"ToggleShadersText": "Use Home button to toggle shaders in the game",
|
||||
"Shaders": "Shaders",
|
||||
|
|
|
@ -6,6 +6,10 @@
|
|||
"Language": "界面語言",
|
||||
"Voice": "語音包",
|
||||
"VoiceNotification": "This feature requires you to manually select the new voice pack in the game",
|
||||
"Theme": "Theme",
|
||||
"Light": "Light",
|
||||
"Dark": "Dark",
|
||||
"System": "System",
|
||||
"PreInstallationRequired": "pre-installation required",
|
||||
"ToggleShadersText": "Use Home button to toggle shaders in the game",
|
||||
"Shaders": "Shaders",
|
||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
Before Width: | Height: | Size: 597 KiB After Width: | Height: | Size: 554 KiB |
Binary file not shown.
Before Width: | Height: | Size: 157 KiB After Width: | Height: | Size: 157 KiB |
|
@ -4,6 +4,12 @@ body
|
|||
margin: 0
|
||||
padding: 0
|
||||
|
||||
img.background
|
||||
position: absolute
|
||||
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
::-webkit-scrollbar
|
||||
width: 10px
|
||||
|
||||
|
|
|
@ -1,416 +1,372 @@
|
|||
$light: #f1f4f9
|
||||
$light2: #eff2ff
|
||||
$primary: #657ef8
|
||||
$secondary: #e1e7ff
|
||||
@use "sass:map"
|
||||
|
||||
$dark: #3B4252
|
||||
$dark2: #2E3440
|
||||
$dark3: #4C566A
|
||||
$dark-fg-disabled: #D8DEE9
|
||||
$dark-fg: #ECEFF4
|
||||
@import "themes/light"
|
||||
@import "themes/dark"
|
||||
|
||||
/* Editable list of properties */
|
||||
@mixin themable($theme-name, $theme-map)
|
||||
body[theme=#{$theme-name}]
|
||||
|
||||
.properties-list
|
||||
table
|
||||
width: 100%
|
||||
background-color: map.get($theme-map, "background")
|
||||
color: map.get($theme-map, "text")
|
||||
|
||||
border-spacing: 0
|
||||
p, span, div
|
||||
color: map.get($theme-map, "text")
|
||||
|
||||
$cell-height: 40px
|
||||
$padding-v: 4px
|
||||
$padding-h: 8px
|
||||
/* Editable list of properties */
|
||||
|
||||
tr
|
||||
height: $cell-height
|
||||
.properties-list
|
||||
table
|
||||
width: 100%
|
||||
|
||||
border-spacing: 0
|
||||
|
||||
$cell-height: 40px
|
||||
$padding-v: 4px
|
||||
$padding-h: 8px
|
||||
|
||||
tr
|
||||
height: $cell-height
|
||||
|
||||
cursor: pointer
|
||||
|
||||
&:hover
|
||||
background-color: map.get($theme-map, "background1")
|
||||
|
||||
td:nth-of-type(1),
|
||||
th:nth-of-type(1)
|
||||
width: 60%
|
||||
|
||||
th,
|
||||
td
|
||||
border-bottom: 1px solid map.get($theme-map, "background1")
|
||||
|
||||
&:not(:last-child)
|
||||
border-right: 1px solid map.get($theme-map, "background1")
|
||||
|
||||
td
|
||||
span
|
||||
display: block
|
||||
|
||||
width: calc(100% - 2 * $padding-h)
|
||||
height: calc($cell-height - 2 * $padding-h)
|
||||
|
||||
margin: auto
|
||||
|
||||
input
|
||||
display: none
|
||||
|
||||
width: calc(100% - 2 * $padding-h)
|
||||
height: calc($cell-height - 2 * $padding-h)
|
||||
|
||||
background-color: map.get($theme-map, "background2")
|
||||
color: map.get($theme-map, "text")
|
||||
|
||||
font-size: 15px
|
||||
|
||||
margin: auto
|
||||
border: unset
|
||||
outline: none
|
||||
|
||||
.selected
|
||||
background-color: map.get($theme-map, "background2") !important
|
||||
|
||||
input
|
||||
display: block
|
||||
|
||||
span
|
||||
display: none
|
||||
|
||||
.properties-list-buttons
|
||||
width: 100%
|
||||
margin-top: 16px
|
||||
|
||||
display: inline-flex
|
||||
justify-content: flex-end
|
||||
|
||||
.button:not(:last-child)
|
||||
margin-right: 8px
|
||||
|
||||
/* List of buttons */
|
||||
|
||||
.list-item
|
||||
display: flex
|
||||
align-items: center
|
||||
|
||||
height: 52px
|
||||
margin-bottom: 8px
|
||||
padding: 0 12px
|
||||
|
||||
border-radius: 12px
|
||||
background-color: map.get($theme-map, "background1")
|
||||
|
||||
font-size: 18px
|
||||
cursor: pointer
|
||||
|
||||
@if $theme-name == dark
|
||||
img
|
||||
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
|
||||
|
||||
&:hover
|
||||
background-color: map.get($theme-map, "background2")
|
||||
|
||||
> div
|
||||
width: auto
|
||||
height: 52px
|
||||
min-width: 52px
|
||||
|
||||
margin-left: auto
|
||||
|
||||
display: flex
|
||||
align-items: center
|
||||
|
||||
img
|
||||
width: 16px
|
||||
height: 16px
|
||||
|
||||
margin: auto
|
||||
|
||||
img.item-delete
|
||||
// filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%)
|
||||
|
||||
width: 20px
|
||||
height: 20px
|
||||
|
||||
display: none
|
||||
|
||||
.list-item-active
|
||||
background-color: map.get($theme-map, "primary") !important
|
||||
color: white !important
|
||||
|
||||
img.item-delete
|
||||
display: none !important
|
||||
|
||||
.list-item-disabled
|
||||
background-color: map.get($theme-map, "background1") !important
|
||||
color: #abadbd !important
|
||||
|
||||
cursor: default !important
|
||||
|
||||
img
|
||||
filter: invert(70%) sepia(13%) saturate(241%) hue-rotate(196deg) brightness(97%) contrast(91%)
|
||||
|
||||
.list-item-downloading
|
||||
img
|
||||
display: none !important
|
||||
|
||||
.list-item-downloaded
|
||||
> div
|
||||
img.item-download
|
||||
display: none
|
||||
|
||||
img.item-delete
|
||||
display: block
|
||||
|
||||
/* Checkbox */
|
||||
|
||||
.checkbox
|
||||
display: inline-flex !important
|
||||
align-items: center
|
||||
|
||||
font-size: larger
|
||||
|
||||
width: calc(100% - 24px)
|
||||
height: 48px
|
||||
padding: 0 12px
|
||||
|
||||
border-radius: 12px
|
||||
|
||||
.checkbox-mark
|
||||
display: flex
|
||||
|
||||
background-color: map.get($theme-map, "background2")
|
||||
|
||||
border-radius: 16px
|
||||
margin-left: auto
|
||||
padding: 8px 16px
|
||||
|
||||
cursor: pointer
|
||||
|
||||
&:hover
|
||||
background-color: map.get($theme-map, "primary")
|
||||
|
||||
svg
|
||||
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
|
||||
|
||||
svg
|
||||
height: 12px
|
||||
width: 12px
|
||||
|
||||
@if $theme-name == dark
|
||||
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
|
||||
|
||||
.checkbox-disabled
|
||||
background-color: map.get($theme-map, "background1")
|
||||
|
||||
.checkbox-mark
|
||||
display: none
|
||||
|
||||
.checkbox-active
|
||||
.checkbox-mark
|
||||
background-color: map.get($theme-map, "primary")
|
||||
|
||||
svg
|
||||
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
|
||||
|
||||
.selectable-checkbox
|
||||
cursor: pointer
|
||||
|
||||
&:hover
|
||||
background-color: $light
|
||||
background-color: map.get($theme-map, "background2")
|
||||
|
||||
td:nth-of-type(1),
|
||||
th:nth-of-type(1)
|
||||
width: 60%
|
||||
.checkbox-active:is(.selectable-checkbox)
|
||||
background-color: map.get($theme-map, "background2")
|
||||
|
||||
th,
|
||||
td
|
||||
border-bottom: 1px solid $light
|
||||
/* Select box */
|
||||
|
||||
&:not(:last-child)
|
||||
border-right: 1px solid $light
|
||||
|
||||
td
|
||||
span
|
||||
display: block
|
||||
.select
|
||||
display: inline-flex
|
||||
align-items: center
|
||||
|
||||
width: calc(100% - 2 * $padding-h)
|
||||
height: calc($cell-height - 2 * $padding-h)
|
||||
font-size: larger
|
||||
|
||||
margin: auto
|
||||
width: calc(100% - 24px)
|
||||
height: 48px
|
||||
padding: 0 12px
|
||||
|
||||
input
|
||||
display: none
|
||||
border-radius: 12px
|
||||
|
||||
width: calc(100% - 2 * $padding-h)
|
||||
height: calc($cell-height - 2 * $padding-h)
|
||||
|
||||
background-color: $light2
|
||||
|
||||
font-size: 15px
|
||||
|
||||
margin: auto
|
||||
border: unset
|
||||
outline: none
|
||||
|
||||
.selected
|
||||
background-color: $light2 !important
|
||||
|
||||
input
|
||||
display: block
|
||||
|
||||
span
|
||||
.select-options
|
||||
position: absolute
|
||||
display: none
|
||||
|
||||
.properties-list-buttons
|
||||
width: 100%
|
||||
margin-top: 16px
|
||||
max-height: 230px
|
||||
overflow: auto
|
||||
|
||||
display: inline-flex
|
||||
justify-content: flex-end
|
||||
background-color: map.get($theme-map, "select-boxes")
|
||||
border-radius: 12px
|
||||
|
||||
.button:not(:last-child)
|
||||
margin-right: 8px
|
||||
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .2)
|
||||
|
||||
|
||||
.properties-list-dark
|
||||
table
|
||||
tr
|
||||
&:hover
|
||||
background-color: $dark3
|
||||
|
||||
td
|
||||
input
|
||||
background-color: $dark2
|
||||
color: $dark-fg
|
||||
|
||||
.selected
|
||||
background-color: $dark2 !important
|
||||
|
||||
/* List of buttons */
|
||||
|
||||
.list-item
|
||||
display: flex
|
||||
align-items: center
|
||||
|
||||
height: 52px
|
||||
margin-bottom: 8px
|
||||
padding: 0 12px
|
||||
|
||||
border-radius: 12px
|
||||
background-color: $light
|
||||
|
||||
font-size: 18px
|
||||
cursor: pointer
|
||||
|
||||
&:hover
|
||||
background-color: $light2
|
||||
|
||||
> div
|
||||
width: auto
|
||||
height: 52px
|
||||
min-width: 52px
|
||||
|
||||
margin-left: auto
|
||||
|
||||
display: flex
|
||||
align-items: center
|
||||
|
||||
img
|
||||
width: 16px
|
||||
height: 16px
|
||||
|
||||
margin: auto
|
||||
|
||||
img.item-delete
|
||||
// filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%)
|
||||
|
||||
width: 20px
|
||||
height: 20px
|
||||
|
||||
display: none
|
||||
|
||||
.list-item-dark
|
||||
background-color: $dark2
|
||||
|
||||
&:hover
|
||||
background-color: $dark
|
||||
|
||||
.list-item-active
|
||||
background-color: $primary !important
|
||||
color: white !important
|
||||
|
||||
img.item-delete
|
||||
display: none !important
|
||||
|
||||
.list-item-disabled
|
||||
background-color: $light !important
|
||||
color: #abadbd !important
|
||||
|
||||
cursor: default !important
|
||||
|
||||
img
|
||||
filter: invert(70%) sepia(13%) saturate(241%) hue-rotate(196deg) brightness(97%) contrast(91%)
|
||||
|
||||
.list-item-downloading
|
||||
img
|
||||
display: none !important
|
||||
|
||||
.list-item-downloaded
|
||||
> div
|
||||
img.item-download
|
||||
display: none
|
||||
|
||||
img.item-delete
|
||||
display: block
|
||||
|
||||
/* Checkbox */
|
||||
|
||||
.checkbox
|
||||
display: inline-flex !important
|
||||
align-items: center
|
||||
|
||||
font-size: larger
|
||||
|
||||
width: calc(100% - 24px)
|
||||
height: 48px
|
||||
padding: 0 12px
|
||||
|
||||
border-radius: 12px
|
||||
|
||||
.checkbox-mark
|
||||
display: flex
|
||||
|
||||
background-color: $light2
|
||||
|
||||
border-radius: 16px
|
||||
margin-left: auto
|
||||
padding: 8px 16px
|
||||
|
||||
cursor: pointer
|
||||
|
||||
&:hover
|
||||
background-color: $primary
|
||||
|
||||
svg
|
||||
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
|
||||
|
||||
svg
|
||||
height: 12px
|
||||
width: 12px
|
||||
|
||||
.checkbox-dark
|
||||
.checkbox-mark
|
||||
background-color: $dark2
|
||||
|
||||
svg
|
||||
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
|
||||
|
||||
.checkbox-disabled
|
||||
background-color: $light
|
||||
|
||||
.checkbox-mark
|
||||
display: none
|
||||
|
||||
.checkbox-disabled-dark
|
||||
background-color: $dark
|
||||
color: $dark3
|
||||
|
||||
.checkbox-mark
|
||||
display: none
|
||||
|
||||
.checkbox-active
|
||||
.checkbox-mark
|
||||
background-color: $primary
|
||||
|
||||
svg
|
||||
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
|
||||
|
||||
.selectable-checkbox
|
||||
cursor: pointer
|
||||
|
||||
&:hover
|
||||
background-color: $light2
|
||||
|
||||
.checkbox-active:is(.selectable-checkbox)
|
||||
background-color: $light2
|
||||
|
||||
/* Select box */
|
||||
|
||||
.select
|
||||
display: inline-flex
|
||||
align-items: center
|
||||
|
||||
font-size: larger
|
||||
|
||||
width: calc(100% - 24px)
|
||||
height: 48px
|
||||
padding: 0 12px
|
||||
|
||||
border-radius: 12px
|
||||
|
||||
.select-options
|
||||
position: absolute
|
||||
display: none
|
||||
|
||||
max-height: 230px
|
||||
overflow: auto
|
||||
|
||||
background-color: white
|
||||
border-radius: 12px
|
||||
|
||||
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .2)
|
||||
|
||||
padding: 8px 12px
|
||||
transform: translateY(calc(50% + 32px))
|
||||
|
||||
right: 32px
|
||||
|
||||
cursor: pointer
|
||||
|
||||
z-index: 1
|
||||
|
||||
ul
|
||||
list-style: none
|
||||
|
||||
padding: 0
|
||||
margin: 0
|
||||
|
||||
li
|
||||
color: #8592a3
|
||||
font-size: smaller
|
||||
|
||||
border-radius: 8px
|
||||
|
||||
padding: 8px 12px
|
||||
margin: 0 -4px
|
||||
transform: translateY(calc(50% + 32px))
|
||||
|
||||
&:hover:not([disabled])
|
||||
background-color: $light2
|
||||
color: $primary
|
||||
right: 32px
|
||||
|
||||
&[disabled]
|
||||
display: block
|
||||
color: #b2c0d3
|
||||
cursor: default
|
||||
cursor: pointer
|
||||
|
||||
li:not(last-child)
|
||||
margin-bottom: 4px
|
||||
z-index: 1
|
||||
|
||||
li.selected
|
||||
background-color: $light2
|
||||
color: $primary
|
||||
@if $theme-name == dark
|
||||
&::-webkit-scrollbar-track
|
||||
background-color: map.get($theme-map, "background2")
|
||||
|
||||
.select-options-dark
|
||||
background-color: $dark2
|
||||
&::-webkit-scrollbar-thumb
|
||||
background: #d8dee9
|
||||
|
||||
&::-webkit-scrollbar-track
|
||||
background-color: $dark2
|
||||
&:hover
|
||||
background: #e5e9f0
|
||||
|
||||
&::-webkit-scrollbar-thumb
|
||||
background: #D8DEE9
|
||||
ul
|
||||
list-style: none
|
||||
|
||||
padding: 0
|
||||
margin: 0
|
||||
|
||||
li
|
||||
color: #8592a3
|
||||
font-size: smaller
|
||||
|
||||
border-radius: 8px
|
||||
|
||||
padding: 8px 12px
|
||||
margin: 0 -4px
|
||||
|
||||
&:hover:not([disabled])
|
||||
background-color: map.get($theme-map, "background2")
|
||||
color: map.get($theme-map, "primary")
|
||||
|
||||
&[disabled]
|
||||
display: block
|
||||
color: #b2c0d3
|
||||
cursor: default
|
||||
|
||||
li:not(last-child)
|
||||
margin-bottom: 4px
|
||||
|
||||
li.selected
|
||||
background-color: map.get($theme-map, "background2")
|
||||
color: map.get($theme-map, "primary")
|
||||
|
||||
.selected-item
|
||||
display: flex
|
||||
align-items: baseline
|
||||
|
||||
font-size: initial
|
||||
|
||||
background-color: map.get($theme-map, "background2")
|
||||
|
||||
border-radius: 16px
|
||||
margin-left: auto
|
||||
padding: 8px 16px
|
||||
|
||||
cursor: pointer
|
||||
|
||||
&:hover
|
||||
background-color: map.get($theme-map, "primary")
|
||||
|
||||
span
|
||||
color: white
|
||||
|
||||
svg
|
||||
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
|
||||
|
||||
svg
|
||||
height: 12px
|
||||
width: 12px
|
||||
|
||||
margin-left: 8px
|
||||
|
||||
transform: rotate(90deg)
|
||||
|
||||
@if $theme-name == dark
|
||||
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
|
||||
|
||||
.select-active
|
||||
.selected-item
|
||||
background-color: map.get($theme-map, "primary")
|
||||
|
||||
span
|
||||
color: white
|
||||
|
||||
svg
|
||||
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
|
||||
|
||||
.select-options
|
||||
display: block
|
||||
|
||||
/* Buttons */
|
||||
|
||||
.button
|
||||
background-color: map.get($theme-map, "background1")
|
||||
border-radius: 16px
|
||||
border: none
|
||||
|
||||
cursor: pointer
|
||||
font-size: 16px
|
||||
|
||||
padding: 8px 20px
|
||||
|
||||
color: map.get($theme-map, "text")
|
||||
|
||||
&:hover
|
||||
background: #E5E9F0
|
||||
background-color: map.get($theme-map, "background2")
|
||||
|
||||
ul
|
||||
li
|
||||
color: $dark-fg
|
||||
.button-primary
|
||||
background-color: map.get($theme-map, "background2")
|
||||
|
||||
&:hover:not([disabled])
|
||||
background-color: $dark
|
||||
|
||||
&[disabled]
|
||||
color: $dark3
|
||||
|
||||
li.selected
|
||||
background-color: $dark
|
||||
&:hover
|
||||
background-color: map.get($theme-map, "primary")
|
||||
color: white
|
||||
|
||||
|
||||
.selected-item
|
||||
display: flex
|
||||
align-items: baseline
|
||||
|
||||
font-size: initial
|
||||
|
||||
background-color: $light2
|
||||
|
||||
border-radius: 16px
|
||||
margin-left: auto
|
||||
padding: 8px 16px
|
||||
|
||||
cursor: pointer
|
||||
|
||||
&:hover
|
||||
background-color: $primary
|
||||
color: white
|
||||
|
||||
svg
|
||||
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
|
||||
|
||||
svg
|
||||
height: 12px
|
||||
width: 12px
|
||||
|
||||
margin-left: 8px
|
||||
|
||||
transform: rotate(90deg)
|
||||
|
||||
.selected-item-dark
|
||||
background-color: $dark2
|
||||
|
||||
&:hover
|
||||
background-color: $dark
|
||||
|
||||
svg
|
||||
filter: invert(100%)
|
||||
|
||||
.select-active
|
||||
.selected-item
|
||||
color: white
|
||||
background-color: $primary
|
||||
|
||||
svg
|
||||
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
|
||||
|
||||
.select-options
|
||||
display: block
|
||||
|
||||
/* Buttons */
|
||||
|
||||
.button
|
||||
background-color: $light
|
||||
border-radius: 16px
|
||||
border: none
|
||||
|
||||
cursor: pointer
|
||||
font-size: 16px
|
||||
|
||||
padding: 8px 20px
|
||||
|
||||
&:hover
|
||||
background-color: $secondary
|
||||
|
||||
.button-primary
|
||||
background-color: $secondary
|
||||
|
||||
&:hover
|
||||
background-color: $primary
|
||||
color: white
|
||||
|
||||
.button-dark
|
||||
background-color: $dark2
|
||||
color: $dark-fg
|
||||
|
||||
&:hover
|
||||
background-color: $dark
|
||||
@include themable(light, $light)
|
||||
@include themable(dark, $dark)
|
||||
|
|
|
@ -1,93 +1,86 @@
|
|||
@use "sass:map"
|
||||
|
||||
@import "basic"
|
||||
|
||||
.body
|
||||
background-color: rgb(245, 246, 251)
|
||||
|
||||
.body-dark
|
||||
background-color: #2E3440
|
||||
@import "themes/light"
|
||||
@import "themes/dark"
|
||||
|
||||
&::-webkit-scrollbar-track
|
||||
background: #2E3440
|
||||
@mixin themable($theme-name, $theme-map)
|
||||
$menu-background: white
|
||||
|
||||
@if $theme-name == dark
|
||||
$menu-background: #434c5e
|
||||
|
||||
.menu
|
||||
position: absolute
|
||||
width: 200px
|
||||
body[theme=#{$theme-name}]
|
||||
background-color: map.get($theme-map, "background")
|
||||
|
||||
top: 0
|
||||
bottom: 0
|
||||
@if $theme-name == dark
|
||||
&::-webkit-scrollbar-track
|
||||
background: #2e3440
|
||||
|
||||
margin: 16px 32px
|
||||
padding: 12px 16px
|
||||
.menu
|
||||
position: absolute
|
||||
width: 200px
|
||||
|
||||
border-radius: 16px
|
||||
top: 0
|
||||
bottom: 0
|
||||
|
||||
background-color: white
|
||||
box-shadow: none
|
||||
margin: 16px 32px
|
||||
padding: 12px 16px
|
||||
|
||||
.menu-dark
|
||||
background-color: #434C5E
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.28)
|
||||
border-radius: 16px
|
||||
|
||||
.menu-item
|
||||
display: flex
|
||||
align-items: center
|
||||
background-color: $menu-background
|
||||
box-shadow: none
|
||||
|
||||
height: 52px
|
||||
margin-bottom: 8px
|
||||
padding: 0 12px
|
||||
.menu-item
|
||||
display: flex
|
||||
align-items: center
|
||||
|
||||
border-radius: 12px
|
||||
color: black
|
||||
height: 52px
|
||||
margin-bottom: 8px
|
||||
padding: 0 12px
|
||||
|
||||
font-size: 18px
|
||||
cursor: pointer
|
||||
border-radius: 12px
|
||||
color: map.get($theme-map, "text")
|
||||
|
||||
.menu-item-dark
|
||||
color: #ECEFF4
|
||||
font-size: 18px
|
||||
cursor: pointer
|
||||
|
||||
.menu-item-active,
|
||||
.menu-item:hover
|
||||
background-color: #eff2ff
|
||||
// background-color: #4C566A
|
||||
color: #657ef8
|
||||
.menu-item-active,
|
||||
.menu-item:hover
|
||||
background-color: map.get($theme-map, "background2")
|
||||
color: map.get($theme-map, "primary")
|
||||
|
||||
.menu-item-active-dark,
|
||||
.menu-item-dark:hover
|
||||
//background-color: #eff2ff
|
||||
background-color: #4C566A
|
||||
color: #657ef8
|
||||
.settings
|
||||
position: absolute
|
||||
width: 532px
|
||||
|
||||
.settings
|
||||
position: absolute
|
||||
width: 532px
|
||||
top: 0
|
||||
bottom: 0
|
||||
left: 258px
|
||||
|
||||
top: 0
|
||||
bottom: 0
|
||||
left: 258px
|
||||
margin: 16px 32px
|
||||
padding: 0 24px
|
||||
|
||||
margin: 16px 32px
|
||||
padding: 0 24px
|
||||
background-color: $menu-background
|
||||
color: black
|
||||
border-radius: 16px
|
||||
|
||||
background-color: white
|
||||
color: black
|
||||
border-radius: 16px
|
||||
overflow: auto
|
||||
|
||||
overflow: auto
|
||||
@if $theme-name == dark
|
||||
&::-webkit-scrollbar-track
|
||||
background: #434c5e
|
||||
|
||||
.settings-dark
|
||||
background-color: #434C5E
|
||||
color: #ECEFF4
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.28)
|
||||
&::-webkit-scrollbar-thumb
|
||||
background: #d8dee9
|
||||
|
||||
&::-webkit-scrollbar-track
|
||||
background: #434C5E
|
||||
&:hover
|
||||
background: #e5e9f0
|
||||
|
||||
&::-webkit-scrollbar-thumb
|
||||
background: #D8DEE9
|
||||
.settings-item:last-child
|
||||
margin-bottom: 24px
|
||||
|
||||
&:hover
|
||||
background: #E5E9F0
|
||||
|
||||
.settings-item:last-child
|
||||
margin-bottom: 24px
|
||||
@include themable(light, $light)
|
||||
@include themable(dark, $dark)
|
||||
|
|
3
src/sass/themes/dark.sass
Normal file
3
src/sass/themes/dark.sass
Normal file
|
@ -0,0 +1,3 @@
|
|||
@use "sass:map"
|
||||
|
||||
$dark: ("background": #3b4252, "background1": #2e3440, "background2": #4c566a, "primary": #657ef8, "secondary": #eceff4, "text": white, "text-inverse": black, "select-boxes": #434c5e)
|
3
src/sass/themes/light.sass
Normal file
3
src/sass/themes/light.sass
Normal file
|
@ -0,0 +1,3 @@
|
|||
@use "sass:map"
|
||||
|
||||
$light: ("background": #f5f6fb, "background1": #f1f4f9, "background2": #eff2ff, "primary": #657ef8, "secondary": #e1e7ff, "text": black, "text-inverse": white, "select-boxes": white)
|
|
@ -8,6 +8,8 @@ import LauncherUI from './lib/LauncherUI';
|
|||
$(() => {
|
||||
LauncherUI.updateLang(LauncherLib.getConfig('lang.launcher'));
|
||||
|
||||
$('body').attr('theme', LauncherUI.theme);
|
||||
|
||||
$('#participate').on('click', async () => {
|
||||
await fetch(`https://an-anime-game-launcher.000webhostapp.com${ !$('#share-country').hasClass('checkbox-active') ? '/?hide-geo' : '' }`);
|
||||
|
||||
|
|
|
@ -27,6 +27,8 @@ if (!fs.existsSync(constants.dxvksDir))
|
|||
fs.mkdirSync(constants.dxvksDir, { recursive: true });
|
||||
|
||||
$(() => {
|
||||
$('body').attr('theme', LauncherUI.theme);
|
||||
|
||||
document.title = `${constants.placeholders.uppercase.full} Linux Launcher`;
|
||||
|
||||
if (LauncherLib.version !== null)
|
||||
|
|
|
@ -36,7 +36,7 @@ const config = new store ({
|
|||
gamemode: false, // GameMode
|
||||
gpu: 'default', // GPU
|
||||
autodelete_dxvk_logs: false, // Auto-delete DXVK logs
|
||||
darkmode: false,
|
||||
theme: 'system', // light / dark / system
|
||||
|
||||
// Version of the game we asked about analytics last time,
|
||||
// or null if user said don't ask him again
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
const { ipcRenderer } = require('electron');
|
||||
|
||||
import $ from 'cash-dom';
|
||||
|
||||
import constants from './constants';
|
||||
|
@ -15,6 +17,8 @@ type LauncherState =
|
|||
'game-voice-update-required' |
|
||||
'game-launch-available';
|
||||
|
||||
type Theme = 'light' | 'dark';
|
||||
|
||||
export default class LauncherUI
|
||||
{
|
||||
protected static _launcherState: LauncherState = 'game-launch-available';
|
||||
|
@ -231,11 +235,13 @@ export default class LauncherUI
|
|||
public static updateBackground (): void
|
||||
{
|
||||
LauncherLib.getBackgroundUri().then(uri => {
|
||||
const style = `url(${uri})`;
|
||||
|
||||
if ($('body').css('background-image') != style)
|
||||
if ($('img.background').attr('src') != uri)
|
||||
{
|
||||
$('body').css('background-image', style);
|
||||
$('img.background').attr('src', uri);
|
||||
|
||||
// TODO
|
||||
/*if (LauncherLib.getConfig('darken_background'))
|
||||
$('img.background').css('filter', this.theme == 'dark' ? 'brightness(0.75)' : '');*/
|
||||
|
||||
/**
|
||||
* Calculating background's left-bottom corner mean brightness
|
||||
|
@ -307,4 +313,13 @@ export default class LauncherUI
|
|||
element.innerText = this.i18n.translate(element.getAttribute('i18id')!);
|
||||
});
|
||||
}
|
||||
|
||||
public static get theme(): Theme
|
||||
{
|
||||
const theme: Theme | 'system' = LauncherLib.getConfig('theme');
|
||||
|
||||
return theme === 'system' ?
|
||||
(ipcRenderer.sendSync('is-window-dark') ? 'dark' : 'light') :
|
||||
theme;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -18,28 +18,20 @@ $(() => {
|
|||
// Make sure settings is shown in correct language.
|
||||
LauncherUI.updateLang(LauncherLib.getConfig('lang.launcher') ?? 'en-us');
|
||||
|
||||
$('body').attr('theme', LauncherUI.theme);
|
||||
|
||||
$('.menu-item').on('click', (e) => {
|
||||
$('.settings')[0]!.scrollTop = document.getElementById(e.target.getAttribute('anchor'))!.offsetTop - 16;
|
||||
|
||||
$('.menu-item').removeClass('menu-item-active');
|
||||
$('.menu-item').removeClass('menu-item-active-dark');
|
||||
$(e.target).addClass(
|
||||
LauncherLib.getConfig('darkmode') ?
|
||||
'menu-item-active-dark' :
|
||||
'menu-item-active'
|
||||
);
|
||||
$(e.target).addClass('menu-item-active');
|
||||
});
|
||||
|
||||
$('.settings').on('scroll', () => {
|
||||
const anchor = $('.settings-item').filter((index, item) => $(item).offset()!.top < 180).last()[0]!.id; // 264
|
||||
|
||||
$('.menu-item').removeClass('menu-item-active');
|
||||
$('.menu-item').removeClass('menu-item-active-dark');
|
||||
$(`.menu-item[anchor=${anchor}]`).addClass(
|
||||
LauncherLib.getConfig('darkmode') ?
|
||||
'menu-item-active-dark' :
|
||||
'menu-item-active'
|
||||
);
|
||||
$(`.menu-item[anchor=${anchor}]`).addClass('menu-item-active');
|
||||
});
|
||||
|
||||
/**
|
||||
|
@ -83,6 +75,23 @@ $(() => {
|
|||
|
||||
$('#voicepack .selected-item').attr('data-hint', LauncherUI.i18n.translate('VoiceNotification'));
|
||||
|
||||
/**
|
||||
* Theme
|
||||
*/
|
||||
|
||||
$(`#theme li[value=${LauncherLib.getConfig('theme')}]`).addClass('selected');
|
||||
$('#theme .selected-item span').text($(`#theme li[value=${LauncherLib.getConfig('theme')}]`).text());
|
||||
|
||||
$('#theme').on('selectionChanged', (e, data: any) => {
|
||||
if (LauncherLib.getConfig('theme') != data.value)
|
||||
{
|
||||
LauncherLib.updateConfig('theme', data.value);
|
||||
|
||||
// Not `data.value` because we don't have "system" theme
|
||||
$('body').attr('theme', LauncherUI.theme);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* HUD
|
||||
*/
|
||||
|
@ -115,42 +124,6 @@ $(() => {
|
|||
ipcRenderer.send('rpc-toggle');
|
||||
});
|
||||
|
||||
/**
|
||||
* Dark Mode
|
||||
*/
|
||||
|
||||
let darkMode = LauncherLib.getConfig('darkmode');
|
||||
const toggledItem: string[] =
|
||||
['menu', 'menu-item', 'menu-item-active',
|
||||
'settings', 'list-item', 'selected-item',
|
||||
'select-options', 'checkbox', 'checkbox-disabled',
|
||||
'properties-list', 'button'];
|
||||
|
||||
if (darkMode === true) {
|
||||
$('#darkmode').addClass('checkbox-active');
|
||||
$('body').addClass('body-dark');
|
||||
toggledItem.forEach((e:string) =>{
|
||||
$(`.${e}`).addClass(`${e}-dark`);
|
||||
})
|
||||
}
|
||||
|
||||
if (darkMode === false) {
|
||||
$('#darkmode').removeClass('checkbox-active');
|
||||
$('body').removeClass('body-dark');
|
||||
toggledItem.forEach((e:string) =>{
|
||||
$(`.${e}`).removeClass(`${e}-dark`);
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
$('#darkmode').on('classChange', () => {
|
||||
LauncherLib.updateConfig('darkmode', $('#darkmode').hasClass('checkbox-active'));
|
||||
$('body').toggleClass('body-dark');
|
||||
toggledItem.forEach(e =>{
|
||||
$(`.${e}`).toggleClass(`${e}-dark`);
|
||||
})
|
||||
});
|
||||
|
||||
/**
|
||||
* Auto-delete DXVK logs
|
||||
*/
|
||||
|
|
Loading…
Add table
Reference in a new issue