From 5b033b286f8b737ea757d72e6204987e64685f8b Mon Sep 17 00:00:00 2001 From: Jeferson Quiguantar Date: Sat, 17 May 2025 11:40:12 -0500 Subject: [PATCH 1/5] Ajuste de ScrollBar --- css/base.css | 55 +++++++++++---- css/custom-theme.css | 83 ++++++++++++++++++++++ css/tabBar.css | 4 ++ index.html | 3 +- localization/languages/tr.json | 123 ++++++--------------------------- package.json | 6 +- scripts/buildBrowserStyles.js | 1 + scripts/watchStyles.js | 44 ++++++++++++ 8 files changed, 199 insertions(+), 120 deletions(-) create mode 100644 css/custom-theme.css create mode 100644 scripts/watchStyles.js diff --git a/css/base.css b/css/base.css index b5b927671..b4caaa03f 100644 --- a/css/base.css +++ b/css/base.css @@ -3,12 +3,15 @@ padding: 0; box-sizing: border-box; font-size: 16px; - font-family: ".SFNSText-Regular", "BlinkMacSystemFont", "Helvetica Neue", - "Segoe UI", "Arial", sans-serif; + /* font-family: ".SFNSText-Regular", "BlinkMacSystemFont", "Helvetica Neue", + "Segoe UI", "Arial", sans-serif; */ + + font-family: 'Roboto', monospace; + /* font-family: "Amore", cursive; */ } /* TODO figure out why the default focus color in Electron is orange */ *:focus { - outline-color: rgb(0, 117, 255); + outline-color: rgb(0, 255, 191); } .dark-mode *:focus { outline-color: transparent; @@ -55,6 +58,13 @@ h3 { h2 { text-align: left; font-size: 2.75em; + margin: 0.5em 0; + font-weight: 300; + opacity: 0.8; + color: inherit; +} +h2:first-of-type { + border-top: none; } h3 { text-align: left; @@ -95,19 +105,36 @@ a { /* styled scrollbars */ -.has-thin-scrollbar::-webkit-scrollbar { - height: 0.25em; +/* Estilo global para todas las scrollbars */ +::-webkit-scrollbar { + width: 8px; /* Ancho reducido */ + height: 8px; /* Alto reducido para scrollbars horizontales */ +} + +::-webkit-scrollbar-track { + background: transparent; /* Hacemos el track invisible */ } -.has-thin-scrollbar::-webkit-scrollbar-track { - background-color: rgba(0, 0, 0, 0.05); + +::-webkit-scrollbar-thumb { + background-color: rgba(0, 0, 0, 0.3); /* Un color oscuro semitransparente para el thumb */ + border-radius: 10px; /* Bordes redondeados */ + border: 2px solid transparent; /* Espacio alrededor del thumb */ + background-clip: content-box; /* Para que el borde sea transparente y no afecte el color del thumb */ } -.has-thin-scrollbar::-webkit-scrollbar-thumb { - background-color: rgba(0, 0, 0, 0.175); - border-radius: 0.25em; + +::-webkit-scrollbar-thumb:hover { + background-color: rgba(0, 0, 0, 0.5); } -.dark-theme .has-thin-scrollbar::-webkit-scrollbar-track { - background-color: rgba(255, 255, 255, 0.25); + +/* Estilo para el tema oscuro */ +body.dark-mode ::-webkit-scrollbar-thumb { + background-color: rgba(255, 255, 255, 0.3); /* Un color claro semitransparente para el thumb en modo oscuro */ } -.dark-theme .has-thin-scrollbar::-webkit-scrollbar-thumb { - background-color: rgba(255, 255, 255, 0.6); + +body.dark-mode ::-webkit-scrollbar-thumb:hover { + background-color: rgba(255, 255, 255, 0.5); +} + +.section-separator { + /* Eliminado: restauración del archivo original */ } diff --git a/css/custom-theme.css b/css/custom-theme.css new file mode 100644 index 000000000..cdbcd8eb0 --- /dev/null +++ b/css/custom-theme.css @@ -0,0 +1,83 @@ +:root { + /* Colores principales */ + --primary-color: #ff0000; /* Rojo brillante */ + --secondary-color: #00ff00; /* Verde brillante */ + --accent-color: #0000ff; /* Azul brillante */ + + /* Colores de fondo */ + --background-light: #f0f0f0; + --background-dark: #2d2d2d; + + /* Colores de texto */ + --text-light: #000000; + --text-dark: #ffffff; + + /* Colores de la barra de navegación */ + --navbar-light: #e0e0e0; + --navbar-dark: #3d3d3d; + + /* Colores de pestañas */ + --tab-active-light: rgba(5, 87, 69, 0.2); /* Rojo con transparencia */ + --tab-active-dark: rgba(0, 255, 0, 0.2); /* Verde con transparencia */ + --tab-hover-light: rgba(0, 0, 0, 0.1); + --tab-hover-dark: rgba(255, 255, 255, 0.1); +} + +/* Tema claro */ +body { + --theme-background-color: var(--background-light); + --theme-text-color: var(--text-light); + --theme-accent-color: var(--primary-color); +} + +/* Tema oscuro */ +body.dark-theme { + --theme-background-color: var(--background-dark); + --theme-text-color: var(--text-dark); + --theme-accent-color: var(--secondary-color); +} + +/* Estilos de la barra de navegación */ +#navbar { + background-color: var(--navbar-light) !important; +} + +body.dark-theme #navbar { + background-color: var(--navbar-dark) !important; +} + +/* Estilos de las pestañas */ +.tab-item.active { + background-color: var(--tab-active-light) !important; +} + +body.dark-theme .tab-item.active { + background-color: var(--tab-active-dark) !important; +} + +.tab-item:hover { + background-color: var(--tab-hover-light) !important; +} + +body.dark-theme .tab-item:hover { + background-color: var(--tab-hover-dark) !important; +} + +/* Estilos de botones */ +.navbar-action-button { + color: var(--theme-text-color) !important; +} + +.navbar-action-button:hover { + background-color: var(--theme-accent-color) !important; + color: var(--theme-background-color) !important; +} + +/* Estilos de la barra de búsqueda */ +#searchbar { + background-color: var(--navbar-light) !important; +} + +body.dark-theme #searchbar { + background-color: var(--navbar-dark) !important; +} \ No newline at end of file diff --git a/css/tabBar.css b/css/tabBar.css index e956064a5..44b373736 100644 --- a/css/tabBar.css +++ b/css/tabBar.css @@ -432,3 +432,7 @@ body:not(.dark-theme) .progress-bar { transform: translateX(0%); transition: transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + +.tab-bar, .navbar-action-button, .tab-item { + font-family: 'MesloLGL Nerd Font', 'MesloLGL NF', 'MesloLGLDZ Nerd Font', 'MesloLGLDZ NF', monospace; +} diff --git a/index.html b/index.html index d0e97bc17..25e139404 100644 --- a/index.html +++ b/index.html @@ -4,10 +4,11 @@ - Min + Apu + diff --git a/localization/languages/tr.json b/localization/languages/tr.json index 19acc5ae1..9ad74e110 100644 --- a/localization/languages/tr.json +++ b/localization/languages/tr.json @@ -2,9 +2,6 @@ "name": "Turkish (Turkey)", "identifier": "tr", "translations": { - /* Context menu items - these are the items displayed in the menu when you right-click on a page - */ "addToDictionary": "Sözlüğe Ekle", "pictureInPicture": "Resim İçinde Resim", "openInNewTab": "Yeni Sekmede Aç", @@ -14,32 +11,28 @@ "openImageInNewTab": "Resmi Yeni Sekmede Aç", "openImageInNewPrivateTab": "Resmi Yeni Gizli Sekmede Aç", "saveImageAs": "Resmi Farklı Kaydet", - "searchWith": "%s ile ara", //%s will be replaced with the name of the current search engine + "searchWith": "%s ile ara", "copyLink": "Linki Kopyala", "copyEmailAddress": "E-Posta Adresini Kopyala", "selectAll": "Hepsini Seç", "undo": "Geri", "redo": "İleri", "cut": "Kes", - "copy": "Kopyala", //this is a verb (as in "copy the currently-selected text") + "copy": "Kopyala", "paste": "Yapıştır", "pasteAndMatchStyle": "Yapıştır ve Stili Eşle", "goBack": "Geri Git", "goForward": "İleri Git", "inspectElement": "Öğeyi İncele", "translatePage": "Sayfayı Çevir", - /* searchbar */ "placesPluginOpenAgain": "Yeniden Aç", "placesPluginSwitchToTab": "Sekmeye Git", "placesPluginSwitchToTask": "Şu Göreve Git \"%t\"", "pasteAndGo": "Yapıştır ve Git", - "DDGAnswerSubtitle": "Cevap", //this is a noun - it is used as a subtitle when displaying Instant Answers from DuckDuckGo in the searchbar - "suggestedSite": "Önerilen site", //this is used to label suggested websites from the DuckDuckGo API, - "resultsFromDDG": "DuckDuckGo'dan sonuçlar", //this is used as a label to indicate which results come from DuckDuckGo's API - "taskN": "Görev %n", //this is used as a way to identify which tab a task is in "task 1", "task 2", ... - /* custom commands - these are some of the items that show up when you press ! in the searchbar. - Each one of these strings describes what the command will do when you run it. */ + "DDGAnswerSubtitle": "Cevap", + "suggestedSite": "Önerilen site", + "resultsFromDDG": "DuckDuckGo'dan sonuçlar", + "taskN": "Görev %n", "showMoreBangs": "Daha fazla göster", "viewSettings": "Görünüm Ayarları", "takeScreenshot": "Ekran Görüntüsü Al", @@ -63,19 +56,17 @@ "importBookmarks": "Yer imlerini HTML dosyasından içe aktar", "exportBookmarks": "Yer imlerini dışa aktar", "runUserscript": "Kullanıcı betiklerini çalıştır", - /* navbar */ "openMenu": "Menüyü Aç", "enterReaderView": "Okuyucu görünümüne girin", "exitReaderView": "Okuyucu görünümünden çıkın", - "newTabLabel": "Yeni Sekme", //this is a noun, used for tabs that don't have a page loaded in them yet + "newTabLabel": "Yeni Sekme", "connectionNotSecure": "Bu web sitesine yapmış olduğunuz bağlantı güvenli değil.", "searchbarPlaceholder": "Arayın veya adres girin", "privateTab": "Gizli sekme", - "newTabAction": "Yeni Sekme", //this is a verb, used to label a button that adds a tab to the tabstrip when clicked - /* task overlay */ + "newTabAction": "Yeni Sekme", "viewTasks": "Görevleri Görüntüle", - "newTask": "Yeni Görev", //"new" is a verb - it is used for a button at the bottom of the task overlay - "defaultTaskName": "Görev %n", //this is the name used for newly-created tasks; %n is replaced with a number ("task 1", "task 2", etc) + "newTask": "Yeni Görev", + "defaultTaskName": "Görev %n", "taskDeleteWarning": { "unsafeHTML": "Görev silindi. Geri al" }, @@ -83,16 +74,13 @@ "returnToTask": "Önceki göreve geri dön", "taskDescriptionTwo": "%t ve %t", "taskDescriptionThree": "%t, %t ve %n fazlası", - /* find in page toolbar */ - "searchInPage": "Sayfada Ara", //this is used as the placeholder text for the textbox in the find in page toolbar - "findMatchesSingular": "%i / %t eşleşme", //this and the next label are used to indicate which match is currently highlighted + "searchInPage": "Sayfada Ara", + "findMatchesSingular": "%i / %t eşleşme", "findMatchesPlural": "%i / %t eşleşme", - /* Focus mode */ "isFocusMode": "Odak Modundasınız.", - "closeDialog": "Tamam", //used as a label for the button that closes the dialog + "closeDialog": "Tamam", "focusModeExplanation1": "Odak modunda yeni sekme açamaz ya da görevler arasında geçiş yapamazsınız.", "focusModeExplanation2": "Odak modundan çıkmak için görünüm menüsünden \"odak modu\" tikini kaldırabilirsiniz.", - /* relative dates */ "timeRangeJustNow": "Şu anda", "timeRangeMinutes": "Birkaç dakika önce", "timeRangeHour": "Son bir saat içinde", @@ -102,7 +90,6 @@ "timeRangeMonth": "Geçtiğimiz ay", "timeRangeYear": "Geçtiğimiz yıl", "timeRangeLongerAgo": "Çok uzun zaman önce", - /* pages/error/index.html */ "crashErrorTitle": "Bir şeyler yanlış gitti.", "crashErrorSubtitle": "Bu sayfayı görüntülerken bir sorun oluştu.", "errorPagePrimaryAction": "Tekrar deneyin", @@ -119,21 +106,17 @@ "sslTimeErrorMessage": "Min, siteye güvenli bir şekilde bağlanamadı. Lütfen bilgisayarınızın saat ayarının doğru olduğundan emin olun.", "addressInvalidTitle": "Bu adres geçersiz.", "genericError": "Bir hata oluştu", - /* pages/phishing/index.html */ "phishingErrorTitle": "Bu site size zarar verebilir.", "phishingErrorMessage": "Bu web sitesi, şifreleriniz veya banka bilgileri gibi kişisel bilgilerinizi çalmaya çalışıyor olabilir.", "phishingErrorVisitAnyway": "Siteyi yine de ziyaret et", "phishingErrorLeave": "Bu siteden ayrıl", - /* multiple instances alert */ "multipleInstancesErrorMessage": "Bir hata oluştu. Açık olan tüm sekmeleri kapatıp, Min'i yeniden başlatın.", - /* pages/sessionRestoreError/index.html */ "sessionRestoreErrorTitle": "Bir hata oluştu", "sessionRestoreErrorExplanation": "Kaydedilen sekmeleriniz doğru bir şekilde geri yüklenemedi.", - "sessionRestoreErrorBackupInfo": "Verilerinizin yedeği şu konuma kaydedildi: %l.", //%l will be replaced with a path to a file + "sessionRestoreErrorBackupInfo": "Verilerinizin yedeği şu konuma kaydedildi: %l.", "sessionRestoreErrorLinkInfo": { "unsafeHTML": "Bu hata olmaya devam ederse, lütfen buradan yeni bir sorun başlığı açın." }, - /* pages/settings/index.html */ "settingsPreferencesHeading": "Tercihler", "settingsRestartRequired": "Değişiklikleri uygulamak için yeniden başlatmanız gerekiyor.", "settingsPrivacyHeading": "İçerik Engelleme", @@ -146,8 +129,8 @@ "settingsBlockedRequestCount": { "unsafeHTML": "Min şimdiye kadar, reklam ve takipçi engelledi." }, - "settingsCustomBangs": "Kişiselleştirilebilir Komutlar" - "settingsCustomBangsAdd": "Yeni komut ekle" + "settingsCustomBangs": "Kişiselleştirilebilir Komutlar", + "settingsCustomBangsAdd": "Yeni komut ekle", "settingsCustomBangsPhrase": "Cümle (Gerekli)", "settingsCustomBangsSnippet": "Açıklama (İsteğe Bağlı)", "settingsCustomBangsRedirect": "Yönlendirme URL'si (Gerekli)", @@ -184,7 +167,7 @@ "settingsNewWindowPickTask": "Görev listesini göster", "settingsSearchEngineHeading": "Arama Motoru", "settingsDefaultSearchEngine": "Bir varsayılan arama motoru seçin:", - "settingsDDGExplanation": "Arama çubuğundaki anlık yanıtları görmek için DuckDuckGo’yu varsayılan arama motoru olarak ayarlayın.", + "settingsDDGExplanation": "Arama çubuğundaki anlık yanıtları görmek için DuckDuckGo'yu varsayılan arama motoru olarak ayarlayın.", "customSearchEngineDescription": "Arama terimini %s ile değiştir", "settingsKeyboardShortcutsHeading": "Klavye Kısayolları", "settingsKeyboardShortcutsHelp": "Birden çok kısayolu ayırmak için virgül kullanın.", @@ -195,7 +178,6 @@ "settingsProxyRules": "Vekil sunucu kuralları:", "settingsProxyBypassRules": "Vekil sunucu kullanılmasın:", "settingsProxyConfigurationURL": "Konfigürasyon Adresi", - /* app menu */ "appMenuFile": "Dosya", "appMenuNewTab": "Yeni Sekme", "appMenuDuplicateTab": "Sekmeyi Çoğalt", @@ -217,7 +199,7 @@ "appMenuZoomIn": "Yakınlaştır", "appMenuZoomOut": "Uzaklaştır", "appMenuActualSize": "Gerçek Boyut", - "appMenuFullScreen": "Tam Ekran", //on some platforms, this string is replaced with one built-in to the OS + "appMenuFullScreen": "Tam Ekran", "appMenuFocusMode": "Odak Modu", "appMenuBookmarks": "Yer İmleri", "appMenuHistory": "Geçmiş", @@ -234,7 +216,7 @@ "appMenuReportBug": "Hata Bildir", "appMenuTakeTour": "Tur atın", "appMenuViewGithub": "GitHub'da Göster", - "appMenuAbout": "%n Hakkında", //%n is replaced with app name + "appMenuAbout": "%n Hakkında", "appMenuPreferences": "Seçenekler", "appMenuServices": "Servisler", "appMenuHide": "%n i Gizle", @@ -242,74 +224,9 @@ "appMenuShowAll": "Tümünü Göster", "appMenuQuit": "%n'den Çık", "appMenuBringToFront": "Tümünü Öne Getir", - /* Tab menu */ "tabMenuNewWindow": "Sekmeyi Yeni Pencereye Taşı", "tabMenuReload": "Yeniden Yükle", - /* PDF Viewer */ "PDFInvertPage": "Sayfa renklerini ters çevir", - "PDFPageCounter": { - "unsafeHTML": " sayfanın i" - }, - /* Context Reader */ - "buttonReaderSettings": "Okuyucu Ayarları", - "buttonReaderLightTheme": "Açık", - "buttonReaderSepiaTheme": "Sepya", - "buttonReaderDarkTheme": "Koyu", - "openReaderView": "Her zaman okuyucu görünümünde aç", - "autoRedirectBannerReader": "Bu sitedeki makaleler her zaman okuyucu görünümünde açılsın mı?", - "buttonReaderRedirectYes": "Evet", - "buttonReaderRedirectNo": "Hayır", - "articleReaderView": "Orjinal Makale", - /* Download manager */ - "downloadCancel": "İptal", - "downloadStateCompleted": "Tamamlandı", - "downloadStateFailed": "İndirilemedi", - /* Update Notifications */ - "updateNotificationTitle": "Min'in yeni bir sürümü mevcut", - /* Autofill settings */ - "settingsPasswordAutoFillHeadline": "Parola Otomatik Doldurma", - "settingsSelectPasswordManager": "Desteklenen parola yöneticilerinden birini seçin:", - "keychainViewPasswords": "Kayıtlı parolaları pöster", - /* Password manager setup */ - "passwordManagerSetupHeading": "Otomatik Doldurmayı kullanabilmek için %p kurulumunu tamamlayın", - "passwordManagerSetupStep1": { - "unsafeHTML": "İlk olarak, ve ve arşivden çıkartın." - }, - "passwordManagerInstallerSetup": { - "unsafeHTML": " indirin ve dosyayı aşağıdaki kutucuğa sürükleyip bırakın:" - }, - "passwordManagerSetupLink": "%p CLI aracını indir ", - "passwordManagerSetupLinkInstaller": "%p CLI yükleyicisi", - "passwordManagerSetupStep2": "Ardından aracı aşağıdaki kutucuğa sürükleyip bırakın:", - "passwordManagerSetupDragBox": "Aracı buraya sürükleyin", - "passwordManagerSetupInstalling": "Yükleniyor...", - "passwordManagerBitwardenSignIn": "Bitwarden hesabınızı bağlamak için vault.bitwarden.com/#/settings/account adresine gidin, sayfanın altına inin ve \"View API Key\"yi seçin. Ardından değerleri aşağıdaki alanlara yapıştırın.", - "passwordManagerSetupSignIn": "Otomatik doldurmayı kullanabilmek için parola yöneticinize giriş yapın. Kimlik bilgileriniz Min içerisinde bir yere kaydedilmeyecektir.", - "disableAutofill": "Otomatik doldurmayı Devre Dışı Bırak", - "passwordManagerSetupUnlockError": "Parola kaydedicisinin kilidi açılamadı: ", - "passwordManagerSetupRetry": "Doğru dosyayı kullandığınızdan ve geçerli parolayı girdiğinizden emin olun. Dosyayı buraya sürükleyerek tekrar deneyebilirsniz.", - "passwordManagerUnlock": "Parola kayıtlarınızın kilidini açmak için %p ana parolasını girin:", - /* Password save bar */ - "passwordCaptureSavePassword": "% için parola kaydedilsin mi?", - "passwordCaptureSave": "Kaydet", - "passwordCaptureDontSave": "Kaydetme", - "passwordCaptureNeverSave": "Asla kaydetme", - "generatePassword": "Parola Oluştur", - /* Password viewer */ - "savedPasswordsHeading": "Kayıtlı Parolalar", - "savedPasswordsEmpty": "Kaydedilmiş parola yok.", - "savedPasswordsNeverSavedLabel": "Daha önce kaydedilmedi", - "deletePassword": "% için parola silinsin mi?", - /* Dialogs */ - "loginPromptTitle": "Giriş yapın %h", //%h is replaced with host, %r with realm (title of protected part of site) - "dialogConfirmButton": "Onayla", - "dialogSkipButton": "İptal", - "username": "Kullanıcı Adı", - "email": "E-Posta", - "password": "Parola", - "secretKey": "Gizli anahtar", - "openExternalApp": "Harici uygulamayı aç", - "clickToCopy": "Kopyalamak için Tıkla", - "copied": "Kopyalandı" + "PDFPageCounter": "%i / %t" } } diff --git a/package.json b/package.json index b437d28e3..378c687c4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "min", - "productName": "Min", + "name": "apu", + "productName": "Apu", "author": "PalmerAL", "version": "1.35.0", "description": "A fast, minimal browser that protects your privacy", @@ -64,8 +64,10 @@ "postinstall": "node ./scripts/setupDevEnv.js", "test": "standard --verbose js/**/*.js main/*.js", "watch": "node ./scripts/watch.js", + "watchStyles": "node ./scripts/watchStyles.js", "startElectron": "electron . --development-mode", "start": "npm run build && concurrently \"npm run watch\" \"npm run startElectron\"", + "dev": "concurrently \"npm run watch\" \"npm run watchStyles\" \"npm run startElectron\"", "buildMain": "node ./scripts/buildMain.js", "buildBrowser": "node ./scripts/buildBrowser.js", "buildBrowserStyles": "node ./scripts/buildBrowserStyles.js", diff --git a/scripts/buildBrowserStyles.js b/scripts/buildBrowserStyles.js index ded9b3145..293d05d57 100644 --- a/scripts/buildBrowserStyles.js +++ b/scripts/buildBrowserStyles.js @@ -5,6 +5,7 @@ const outFile = path.resolve(__dirname, '../dist/bundle.css') const modules = [ 'css/base.css', + 'css/custom-theme.css', 'css/windowControls.css', 'css/modal.css', 'css/tabBar.css', diff --git a/scripts/watchStyles.js b/scripts/watchStyles.js new file mode 100644 index 000000000..05241c5c8 --- /dev/null +++ b/scripts/watchStyles.js @@ -0,0 +1,44 @@ +const chokidar = require('chokidar'); +const { exec } = require('child_process'); +const path = require('path'); + +// Directorio a observar +const watchDir = path.resolve(__dirname, '../css'); + +// Función para reconstruir los estilos +function rebuildStyles() { + console.log('🔄 Reconstruyendo estilos...'); + exec('npm run buildBrowserStyles', (error, stdout, stderr) => { + if (error) { + console.error('❌ Error al reconstruir estilos:', error); + return; + } + if (stderr) { + console.error('⚠️ Advertencias:', stderr); + } + console.log('✅ Estilos reconstruidos exitosamente'); + }); +} + +// Configurar el observador +const watcher = chokidar.watch(watchDir, { + ignored: /(^|[\/\\])\../, // ignorar archivos ocultos + persistent: true +}); + +// Eventos del observador +watcher + .on('add', path => { + console.log(`📝 Archivo ${path} ha sido añadido`); + rebuildStyles(); + }) + .on('change', path => { + console.log(`📝 Archivo ${path} ha sido modificado`); + rebuildStyles(); + }) + .on('unlink', path => { + console.log(`🗑️ Archivo ${path} ha sido eliminado`); + rebuildStyles(); + }); + +console.log('👀 Observando cambios en archivos CSS...'); \ No newline at end of file From 8711fc1050d0ec4a46175c6c5b8c67e61b9694a0 Mon Sep 17 00:00:00 2001 From: Jeferson Quiguantar Date: Sun, 18 May 2025 13:57:20 -0500 Subject: [PATCH 2/5] Revertimos al origen --- css/custom-theme.css | 83 ----------------------------------- index.html | 1 - package.json | 2 - scripts/buildBrowserStyles.js | 1 - scripts/watchStyles.js | 44 ------------------- 5 files changed, 131 deletions(-) delete mode 100644 css/custom-theme.css delete mode 100644 scripts/watchStyles.js diff --git a/css/custom-theme.css b/css/custom-theme.css deleted file mode 100644 index cdbcd8eb0..000000000 --- a/css/custom-theme.css +++ /dev/null @@ -1,83 +0,0 @@ -:root { - /* Colores principales */ - --primary-color: #ff0000; /* Rojo brillante */ - --secondary-color: #00ff00; /* Verde brillante */ - --accent-color: #0000ff; /* Azul brillante */ - - /* Colores de fondo */ - --background-light: #f0f0f0; - --background-dark: #2d2d2d; - - /* Colores de texto */ - --text-light: #000000; - --text-dark: #ffffff; - - /* Colores de la barra de navegación */ - --navbar-light: #e0e0e0; - --navbar-dark: #3d3d3d; - - /* Colores de pestañas */ - --tab-active-light: rgba(5, 87, 69, 0.2); /* Rojo con transparencia */ - --tab-active-dark: rgba(0, 255, 0, 0.2); /* Verde con transparencia */ - --tab-hover-light: rgba(0, 0, 0, 0.1); - --tab-hover-dark: rgba(255, 255, 255, 0.1); -} - -/* Tema claro */ -body { - --theme-background-color: var(--background-light); - --theme-text-color: var(--text-light); - --theme-accent-color: var(--primary-color); -} - -/* Tema oscuro */ -body.dark-theme { - --theme-background-color: var(--background-dark); - --theme-text-color: var(--text-dark); - --theme-accent-color: var(--secondary-color); -} - -/* Estilos de la barra de navegación */ -#navbar { - background-color: var(--navbar-light) !important; -} - -body.dark-theme #navbar { - background-color: var(--navbar-dark) !important; -} - -/* Estilos de las pestañas */ -.tab-item.active { - background-color: var(--tab-active-light) !important; -} - -body.dark-theme .tab-item.active { - background-color: var(--tab-active-dark) !important; -} - -.tab-item:hover { - background-color: var(--tab-hover-light) !important; -} - -body.dark-theme .tab-item:hover { - background-color: var(--tab-hover-dark) !important; -} - -/* Estilos de botones */ -.navbar-action-button { - color: var(--theme-text-color) !important; -} - -.navbar-action-button:hover { - background-color: var(--theme-accent-color) !important; - color: var(--theme-background-color) !important; -} - -/* Estilos de la barra de búsqueda */ -#searchbar { - background-color: var(--navbar-light) !important; -} - -body.dark-theme #searchbar { - background-color: var(--navbar-dark) !important; -} \ No newline at end of file diff --git a/index.html b/index.html index 25e139404..d54fea741 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,6 @@ - diff --git a/package.json b/package.json index 378c687c4..5c5986e3d 100644 --- a/package.json +++ b/package.json @@ -64,10 +64,8 @@ "postinstall": "node ./scripts/setupDevEnv.js", "test": "standard --verbose js/**/*.js main/*.js", "watch": "node ./scripts/watch.js", - "watchStyles": "node ./scripts/watchStyles.js", "startElectron": "electron . --development-mode", "start": "npm run build && concurrently \"npm run watch\" \"npm run startElectron\"", - "dev": "concurrently \"npm run watch\" \"npm run watchStyles\" \"npm run startElectron\"", "buildMain": "node ./scripts/buildMain.js", "buildBrowser": "node ./scripts/buildBrowser.js", "buildBrowserStyles": "node ./scripts/buildBrowserStyles.js", diff --git a/scripts/buildBrowserStyles.js b/scripts/buildBrowserStyles.js index 293d05d57..ded9b3145 100644 --- a/scripts/buildBrowserStyles.js +++ b/scripts/buildBrowserStyles.js @@ -5,7 +5,6 @@ const outFile = path.resolve(__dirname, '../dist/bundle.css') const modules = [ 'css/base.css', - 'css/custom-theme.css', 'css/windowControls.css', 'css/modal.css', 'css/tabBar.css', diff --git a/scripts/watchStyles.js b/scripts/watchStyles.js deleted file mode 100644 index 05241c5c8..000000000 --- a/scripts/watchStyles.js +++ /dev/null @@ -1,44 +0,0 @@ -const chokidar = require('chokidar'); -const { exec } = require('child_process'); -const path = require('path'); - -// Directorio a observar -const watchDir = path.resolve(__dirname, '../css'); - -// Función para reconstruir los estilos -function rebuildStyles() { - console.log('🔄 Reconstruyendo estilos...'); - exec('npm run buildBrowserStyles', (error, stdout, stderr) => { - if (error) { - console.error('❌ Error al reconstruir estilos:', error); - return; - } - if (stderr) { - console.error('⚠️ Advertencias:', stderr); - } - console.log('✅ Estilos reconstruidos exitosamente'); - }); -} - -// Configurar el observador -const watcher = chokidar.watch(watchDir, { - ignored: /(^|[\/\\])\../, // ignorar archivos ocultos - persistent: true -}); - -// Eventos del observador -watcher - .on('add', path => { - console.log(`📝 Archivo ${path} ha sido añadido`); - rebuildStyles(); - }) - .on('change', path => { - console.log(`📝 Archivo ${path} ha sido modificado`); - rebuildStyles(); - }) - .on('unlink', path => { - console.log(`🗑️ Archivo ${path} ha sido eliminado`); - rebuildStyles(); - }); - -console.log('👀 Observando cambios en archivos CSS...'); \ No newline at end of file From f2673330ecbf754c82ae0901d9d613cb3026cd36 Mon Sep 17 00:00:00 2001 From: Jeferson Quiguantar Date: Sun, 18 May 2025 14:23:06 -0500 Subject: [PATCH 3/5] Refactorizacion completa --- package.json | 2 ++ scripts/watchStyles.js | 41 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 43 insertions(+) create mode 100644 scripts/watchStyles.js diff --git a/package.json b/package.json index 5c5986e3d..378c687c4 100644 --- a/package.json +++ b/package.json @@ -64,8 +64,10 @@ "postinstall": "node ./scripts/setupDevEnv.js", "test": "standard --verbose js/**/*.js main/*.js", "watch": "node ./scripts/watch.js", + "watchStyles": "node ./scripts/watchStyles.js", "startElectron": "electron . --development-mode", "start": "npm run build && concurrently \"npm run watch\" \"npm run startElectron\"", + "dev": "concurrently \"npm run watch\" \"npm run watchStyles\" \"npm run startElectron\"", "buildMain": "node ./scripts/buildMain.js", "buildBrowser": "node ./scripts/buildBrowser.js", "buildBrowserStyles": "node ./scripts/buildBrowserStyles.js", diff --git a/scripts/watchStyles.js b/scripts/watchStyles.js new file mode 100644 index 000000000..7a05ced2c --- /dev/null +++ b/scripts/watchStyles.js @@ -0,0 +1,41 @@ +const chokidar = require('chokidar') +const path = require('path') +const { exec } = require('child_process') + +// Observar todos los archivos .css en el directorio css +const cssDirectoryToWatch = path.join(__dirname, '../css') + +const buildCommand = 'node scripts/buildBrowserStyles.js' + +// Inicializar el observador +const watcher = chokidar.watch(`${cssDirectoryToWatch}/**/*.css`, { + persistent: true, + ignoreInitial: true, // No ejecutar al inicio + awaitWriteFinish: { // Ayuda con escrituras atómicas + stabilityThreshold: 200, + pollInterval: 100 + } +}) + +console.log(`[watchStyles] Observando cambios de estilos en ${cssDirectoryToWatch} ...`) + +function rebuildStyles(filePath, event) { + console.log(`[watchStyles] Archivo ${filePath} ha sido ${event === 'add' ? 'añadido' : event === 'unlink' ? 'eliminado' : 'modificado'}, reconstruyendo estilos...`) + exec(buildCommand, (err, stdout, stderr) => { + if (err) { + console.error(`[watchStyles] Error reconstruyendo estilos: ${stderr || err.message}`) + return + } + if (stdout.trim()) { + console.log(`[watchStyles] Estilos reconstruidos exitosamente: ${stdout.trim()}`) + } else { + console.log(`[watchStyles] Estilos reconstruidos exitosamente.`) + } + }) +} + +watcher + .on('add', filePath => rebuildStyles(filePath, 'add')) + .on('change', filePath => rebuildStyles(filePath, 'change')) + .on('unlink', filePath => rebuildStyles(filePath, 'unlink')) // Reconstruir incluso si un CSS es eliminado del directorio + .on('error', error => console.error(`[watchStyles] Error del observador: ${error}`)) \ No newline at end of file From ac0873c228604abfbf93e55afe543c15a9474079 Mon Sep 17 00:00:00 2001 From: Jeferson Quiguantar Date: Sun, 18 May 2025 15:34:46 -0500 Subject: [PATCH 4/5] Creando Propio Theme --- css/base.css | 28 ++++++++++++++++++++-------- css/bookmarkManager.css | 2 +- css/findinpage.css | 6 +++--- css/modal.css | 3 ++- css/newTabPage.css | 2 +- css/passwordCapture.css | 2 +- css/tabEditor.css | 4 ++-- css/taskOverlay.css | 18 +++++++++--------- pages/settings/settings.css | 7 +++++-- 9 files changed, 44 insertions(+), 28 deletions(-) diff --git a/css/base.css b/css/base.css index b4caaa03f..2a81b0efa 100644 --- a/css/base.css +++ b/css/base.css @@ -9,6 +9,17 @@ font-family: 'Roboto', monospace; /* font-family: "Amore", cursive; */ } +:root{ + --navy: #112240; + --slate: #8892b0; + --green: #64ffda; + --light-slate: #ccd6f6; +} + + + + + /* TODO figure out why the default focus color in Electron is orange */ *:focus { outline-color: rgb(0, 255, 191); @@ -28,7 +39,7 @@ button { -webkit-appearance: none; background: none; border: none; - color: inherit; + color: var(--light-slate); outline: none; } body, @@ -41,7 +52,8 @@ html { } body.dark-mode { - background-color: rgb(33, 37, 43); + /* background-color: rgb(33, 37, 43); Color Principal */ + background-color: var(--navy); color: lightgrey; } @@ -49,19 +61,19 @@ h1, h2, h3 { font-size: 5em; - font-weight: 300; + font-weight: 400; opacity: 0.8; margin: 0.5em 0; - color: inherit; + color: var(--light-slate); text-align: center; } h2 { text-align: left; font-size: 2.75em; margin: 0.5em 0; - font-weight: 300; + font-weight: 600; opacity: 0.8; - color: inherit; + color: var(--light-slate); } h2:first-of-type { border-top: none; @@ -88,12 +100,12 @@ h1 + h2 { } a { - color: royalblue; + color: var(--green); text-decoration: none; } .dark-mode a { - color: dodgerblue; + color: var(--green); } .dark-mode input, diff --git a/css/bookmarkManager.css b/css/bookmarkManager.css index 81e0f5a95..f1ac2e1c7 100644 --- a/css/bookmarkManager.css +++ b/css/bookmarkManager.css @@ -88,7 +88,7 @@ padding: 0.35em 0.5em; border-radius: 3px; background: transparent; - color: inherit; + color: var(--light-slate); border: 1px rgba(0, 0, 0, 0.125) solid; opacity: 0.8; } diff --git a/css/findinpage.css b/css/findinpage.css index 43cb2985b..99e6f3de2 100644 --- a/css/findinpage.css +++ b/css/findinpage.css @@ -21,13 +21,13 @@ body.linux #findinpage-bar { appearance: none; outline: none; border: 0; - background: inherit; - color: inherit; + background: var(--light-slate); + color: var(--light-slate); min-width: 80px; } #findinpage-bar #findinpage-input::-webkit-input-placeholder { opacity: 0.75; - color: inherit; + color: var(--light-slate); } #findinpage-bar .divider { height: 100%; diff --git a/css/modal.css b/css/modal.css index aab450fe0..9eaebcfc0 100644 --- a/css/modal.css +++ b/css/modal.css @@ -1,3 +1,4 @@ + #overlay { display: none; } @@ -54,7 +55,7 @@ body.dark-mode #overlay { } .dark-mode .modal { - background-color: rgb(33, 37, 43); + background-color: var(--navy); } .modal-close-button { diff --git a/css/newTabPage.css b/css/newTabPage.css index 26937cede..cb574ac03 100644 --- a/css/newTabPage.css +++ b/css/newTabPage.css @@ -39,7 +39,7 @@ body:not(.is-ntp) #ntp-content { } .dark-mode #ntp-background-controls button { - background: rgb(33, 37, 43); + background: var(--navy); border-color: #aaa; color: white; } diff --git a/css/passwordCapture.css b/css/passwordCapture.css index c8f9be96c..d787f519f 100644 --- a/css/passwordCapture.css +++ b/css/passwordCapture.css @@ -19,7 +19,7 @@ } #password-capture-save { - background: royalblue; + background: var(--green); color: white; padding: 0.33em 2em; border-radius: 3px; diff --git a/css/tabEditor.css b/css/tabEditor.css index 4047a28be..b6ef2df5d 100644 --- a/css/tabEditor.css +++ b/css/tabEditor.css @@ -17,7 +17,7 @@ background: none; -webkit-appearance: none; border: none; - color: inherit; + color: var(--light-slate); flex: 1; height: 1.5em; outline: none; @@ -25,7 +25,7 @@ -webkit-app-region: no-drag; } #tab-editor-input::-webkit-input-placeholder { - color: inherit; + color: var(--light-slate); opacity: 0.5; line-height: 1.25em; } diff --git a/css/taskOverlay.css b/css/taskOverlay.css index 0b2f0965f..77f3e143c 100644 --- a/css/taskOverlay.css +++ b/css/taskOverlay.css @@ -1,7 +1,7 @@ .simulated-navbar { width: 100%; height: calc(36px + var(--control-space-top)); - background-color: inherit; + background-color: var(--navy); z-index: 1; border-bottom: 1px rgba(0, 0, 0, 0.1) solid; display: flex; @@ -57,7 +57,7 @@ } #switch-task-button.active { - color: royalblue !important; + color: var(--green) !important; } #switch-task-button svg { @@ -201,14 +201,14 @@ body:not(.touch) appearance: none; flex: 1; font-size: 1.2em; - color: inherit; + color: var(--light-slate); border: 0; background-color: transparent !important; opacity: 0.75; margin: 0.5em 0.75em 0.5em 0.5em; } .task-name::-webkit-input-placeholder { - color: inherit; + color: var(--light-slate); opacity: 0.8; } #add-task { @@ -216,7 +216,7 @@ body:not(.touch) margin-left: 10%; padding: 1.25em; text-align: center; - color: inherit; + color: var(--light-slate); background-color: rgb(245, 245, 245); cursor: pointer; } @@ -237,8 +237,8 @@ body:not(.touch) } .dark-mode #add-task { - background-color: rgb(33, 37, 43); - color: lightgrey; + background-color: var(--navy); + color: var(--slate); } .dark-mode .is-dragging-tab #add-task { background: none; @@ -301,11 +301,11 @@ body:not(.touch) body.dark-mode #task-overlay { background-color: rgb(40, 44, 52) !important; - color: lightgrey; + color: var(--slate); } .dark-mode #switch-task-button { - color: dodgerblue; + color: var(--green); } .tab-drop-placeholder, .task-drop-placeholder { diff --git a/pages/settings/settings.css b/pages/settings/settings.css index 34f5ee524..aa7aa1c8a 100644 --- a/pages/settings/settings.css +++ b/pages/settings/settings.css @@ -18,14 +18,17 @@ html { overflow: hidden; } .blue-gradient-background { - background: linear-gradient( + background: #112240; + background: linear-gradient(90deg, rgba(17, 34, 64, 0.98) 27%, rgba(45, 107, 93, 0.96) 100%); + + /* background: linear-gradient( 135deg, rgba(80, 122, 196, 1) 43%, rgba(80, 122, 196, 1) 43%, rgba(128, 192, 226, 1) 89%, rgba(128, 192, 226, 1) 89% ); - color: #fff; + color: #fff; */ } .container { From e4dcab8b1f958848aa6a86e81c4ed0b066b13f71 Mon Sep 17 00:00:00 2001 From: Jeferson Quiguantar Date: Sun, 18 May 2025 18:00:07 -0500 Subject: [PATCH 5/5] Ajustando algunos colores --- css/findinpage.css | 2 +- css/tabBar.css | 3 ++- css/webviews.css | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/css/findinpage.css b/css/findinpage.css index 99e6f3de2..cbd8a1e29 100644 --- a/css/findinpage.css +++ b/css/findinpage.css @@ -21,7 +21,7 @@ body.linux #findinpage-bar { appearance: none; outline: none; border: 0; - background: var(--light-slate); + background: var(--navy); color: var(--light-slate); min-width: 80px; } diff --git a/css/tabBar.css b/css/tabBar.css index 44b373736..b86e024f2 100644 --- a/css/tabBar.css +++ b/css/tabBar.css @@ -27,7 +27,8 @@ /* dark colors don't need to be darkened as much for contrast */ .dark-theme #navbar:before { - background: rgba(255, 255, 255, 0.15); + /* background: rgba(255, 255, 255, 0.15); */ + background: var(--navy); } /* navbar buttons */ diff --git a/css/webviews.css b/css/webviews.css index 128193b86..5a123ca54 100644 --- a/css/webviews.css +++ b/css/webviews.css @@ -7,7 +7,7 @@ width: 140px; height: 140px; border-radius: 70px; - background: #000; + background: var(--navy); position: fixed; top: 50%; z-index: 1;