Compare commits

...

2 Commits

Author SHA1 Message Date
spinline
87ddd3bb93 fix: iOS Dark Mode ve Tema Değişimi Düzeltildi
All checks were successful
Build MIPS Binary / build (push) Successful in 5m17s
- tailwind.config.js: darkMode: 'class' olarak ayarlandı (iOS sistem tercihi yerine .dark class kullanımı için)
- statusbar.rs: Tema değişiminde .dark class ekleme mantığı tüm dark temaları kapsayacak şekilde genişletildi
- index.html: Sayfa yüklenirken .dark class ekleyen inline script güncellendi
- public/tailwind.css: PostCSS ile yeniden derlendi (nesting düzleştirildi + .dark seçiciler eklendi)
2026-02-11 01:00:04 +03:00
spinline
463249982c fix: iOS Safari uyumluluk - CSS nesting düzleştirildi
All checks were successful
Build MIPS Binary / build (push) Successful in 5m16s
- PostCSS tabanlı build'e geçildi (@tailwindcss/postcss + postcss-preset-env)
- CSS native nesting (&) düzleştirilerek eski Safari desteği sağlandı
- iOS 15+ ve Safari 15+ desteği eklendi
2026-02-11 00:54:44 +03:00
8 changed files with 6603 additions and 2830 deletions

1
frontend/.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
node_modules/

View File

@@ -1,11 +1,10 @@
<!doctype html> <!doctype html>
<html> <html>
<head>
<head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta <meta name="viewport"
name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
/>
<title>VibeTorrent</title> <title>VibeTorrent</title>
<!-- PWA & Mobile Capable --> <!-- PWA & Mobile Capable -->
@@ -37,6 +36,13 @@
var theme = t.toLowerCase(); var theme = t.toLowerCase();
document.documentElement.setAttribute("data-theme", theme); document.documentElement.setAttribute("data-theme", theme);
// Shadcn dark mode CSS değişkenleri .dark class ile çalışıyor
var darkThemes = ["dark", "black", "night", "coffee", "luxury", "business", "dracula", "halloween", "forest", "synthwave", "dim", "nord", "sunset", "cyberpunk", "abyss"];
if (darkThemes.indexOf(theme) !== -1) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
if (!localTheme) { if (!localTheme) {
localStorage.setItem("vibetorrent_theme", "dark"); localStorage.setItem("vibetorrent_theme", "dark");
} }
@@ -79,23 +85,18 @@
} }
})(); })();
</script> </script>
</head> </head>
<body style="cursor: pointer;"> <body style="cursor: pointer;">
<div <div id="app-loading" style="
id="app-loading"
style="
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; height: 100vh;
font-family: sans-serif; font-family: sans-serif;
" ">
> <div id="app-loading-spinner" style="
<div
id="app-loading-spinner"
style="
width: 40px; width: 40px;
height: 40px; height: 40px;
border: 3px solid currentColor; border: 3px solid currentColor;
@@ -103,21 +104,15 @@
border-radius: 50%; border-radius: 50%;
animation: spin 0.8s linear infinite; animation: spin 0.8s linear infinite;
opacity: 0.5; opacity: 0.5;
" "></div>
></div> <div id="app-loading-error" style="display: none; text-align: center; margin-top: 20px; padding: 0 20px">
<div
id="app-loading-error"
style="display: none; text-align: center; margin-top: 20px; padding: 0 20px"
>
<p style="color: #ef4444; font-weight: bold; margin-bottom: 8px"> <p style="color: #ef4444; font-weight: bold; margin-bottom: 8px">
Uygulama yüklenemedi Uygulama yüklenemedi
</p> </p>
<p style="font-size: 14px; opacity: 0.7"> <p style="font-size: 14px; opacity: 0.7">
Bağlantınız yavaş olabilir veya bir sistem hatası oluşmuş olabilir. Bağlantınız yavaş olabilir veya bir sistem hatası oluşmuş olabilir.
</p> </p>
<button <button onclick="location.reload()" style="
onclick="location.reload()"
style="
margin-top: 16px; margin-top: 16px;
padding: 8px 16px; padding: 8px 16px;
background: #3b82f6; background: #3b82f6;
@@ -126,8 +121,7 @@
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
font-weight: 500; font-weight: 500;
" ">
>
Sayfayı Yenile Sayfayı Yenile
</button> </button>
</div> </div>
@@ -152,6 +146,7 @@
summary { summary {
list-style: none; list-style: none;
} }
summary::-webkit-details-marker { summary::-webkit-details-marker {
display: none; display: none;
} }
@@ -188,7 +183,7 @@
<!-- Service Worker Registration & PWA Setup --> <!-- Service Worker Registration & PWA Setup -->
<script> <script>
// Global Dropdown Closer for iOS/Mobile // Global Dropdown Closer for iOS/Mobile
document.addEventListener('click', function(event) { document.addEventListener('click', function (event) {
const details = document.querySelectorAll('details[open]'); const details = document.querySelectorAll('details[open]');
details.forEach(detail => { details.forEach(detail => {
// Eğer tıklanan yer bu details'in içinde değilse kapat // Eğer tıklanan yer bu details'in içinde değilse kapat
@@ -225,5 +220,6 @@
}); });
} }
</script> </script>
</body> </body>
</html> </html>

File diff suppressed because it is too large Load Diff

View File

@@ -10,8 +10,11 @@
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"devDependencies": { "devDependencies": {
"@tailwindcss/postcss": "^4.1.18",
"autoprefixer": "^10.4.23", "autoprefixer": "^10.4.23",
"postcss": "^8.5.6", "postcss": "^8.5.6",
"postcss-cli": "^11.0.1",
"postcss-preset-env": "^11.1.3",
"tailwindcss": "^4.1.18" "tailwindcss": "^4.1.18"
}, },
"dependencies": { "dependencies": {

View File

@@ -0,0 +1,15 @@
module.exports = {
plugins: {
"@tailwindcss/postcss": {},
"postcss-preset-env": {
features: {
"nesting-rules": true,
},
browsers: [
"last 2 versions",
"iOS >= 15",
"Safari >= 15",
],
},
},
};

File diff suppressed because it is too large Load Diff

View File

@@ -44,7 +44,7 @@ pub fn StatusBar() -> impl IntoView {
if let Some(doc) = document().document_element() { if let Some(doc) = document().document_element() {
let _ = doc.set_attribute("data-theme", &theme); let _ = doc.set_attribute("data-theme", &theme);
// Also set class for Shadcn dark mode support // Also set class for Shadcn dark mode support
if theme == "dark" || theme == "dracula" || theme == "dim" || theme == "abyss" { if theme == "dark" || theme == "dracula" || theme == "dim" || theme == "abyss" || theme == "sunset" || theme == "cyberpunk" || theme == "nord" || theme == "business" || theme == "night" || theme == "black" || theme == "luxury" || theme == "coffee" || theme == "forest" || theme == "halloween" || theme == "synthwave" {
let _ = doc.class_list().add_1("dark"); let _ = doc.class_list().add_1("dark");
} else { } else {
let _ = doc.class_list().remove_1("dark"); let _ = doc.class_list().remove_1("dark");

View File

@@ -9,6 +9,7 @@ const cargoRegistry = path.join(
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
darkMode: "class",
content: [ content: [
"./index.html", "./index.html",
"./src/**/*.{rs,html}", "./src/**/*.{rs,html}",