From f612357850d609f297bfc565142470ca255f56b6 Mon Sep 17 00:00:00 2001 From: Miguel Ribeiro Date: Wed, 3 Jul 2024 17:29:16 +0200 Subject: [PATCH] feat: more uniform and aligned styles on the settings page --- includes/header.php | 17 +++++++++ includes/i18n/de.php | 7 ++++ includes/i18n/el.php | 7 ++++ includes/i18n/en.php | 7 ++++ includes/i18n/es.php | 7 ++++ includes/i18n/fr.php | 7 ++++ includes/i18n/it.php | 7 ++++ includes/i18n/jp.php | 7 ++++ includes/i18n/ko.php | 7 ++++ includes/i18n/pl.php | 7 ++++ includes/i18n/pt.php | 7 ++++ includes/i18n/pt_br.php | 7 ++++ includes/i18n/ru.php | 7 ++++ includes/i18n/sl.php | 7 ++++ includes/i18n/sr.php | 7 ++++ includes/i18n/sr_lat.php | 7 ++++ includes/i18n/tr.php | 7 ++++ includes/i18n/zh_cn.php | 7 ++++ includes/i18n/zh_tw.php | 7 ++++ settings.php | 78 ++++++++++++++++++++++------------------ styles/styles.css | 30 ++++++++++++---- 21 files changed, 209 insertions(+), 42 deletions(-) diff --git a/includes/header.php b/includes/header.php index 5f3bbe7a3..add54ba9a 100644 --- a/includes/header.php +++ b/includes/header.php @@ -35,6 +35,20 @@ $isAdmin = $_SESSION['userId'] == 1; + function hex2rgb($hex) { + $hex = str_replace("#", "", $hex); + if(strlen($hex) == 3) { + $r = hexdec(substr($hex,0,1).substr($hex,0,1)); + $g = hexdec(substr($hex,1,1).substr($hex,1,1)); + $b = hexdec(substr($hex,2,1).substr($hex,2,1)); + } else { + $r = hexdec(substr($hex,0,2)); + $g = hexdec(substr($hex,2,2)); + $b = hexdec(substr($hex,4,2)); + } + return "$r, $g, $b"; + } + ?> @@ -71,12 +85,15 @@ :root { --main-color: ; + --main-color-rgb: ; --accent-color: ; + --accent-color-rgb: ; --hover-color: ; + --hover-color-rgb: ; } diff --git a/includes/i18n/de.php b/includes/i18n/de.php index b8c9df56f..c89483175 100644 --- a/includes/i18n/de.php +++ b/includes/i18n/de.php @@ -182,6 +182,13 @@ "dark_theme" => "Dark Theme", "light_theme" => "Light Theme", "automatic"=> "Automatisch", + "main_color" => "Hauptfarbe", + "accent_color" => "Akzentfarbe", + "hover_color" => "Hover Farbe", + "custom_css" => "Benutzerdefiniertes CSS", + "save_custom_css" => "Benutzerdefiniertes CSS speichern", + "save_custom_colors" => "Benutzerdefinierte Farben speichern", + "reset_custom_colors" => "Benutzerdefinierte Farben zurücksetzen", "calculate_monthly_price" => "Berechne und zeige monatlichen Preis für alle Abonnements an", "convert_prices" => "Preise immer in meine Hauptwährung umrechnen und darin anzeigen (langsamer)", "hide_disabled_subscriptions" => "Deaktivierte Abonnements verstecken", diff --git a/includes/i18n/el.php b/includes/i18n/el.php index 749e02651..7001976a6 100644 --- a/includes/i18n/el.php +++ b/includes/i18n/el.php @@ -182,6 +182,13 @@ "dark_theme" => "Dark Theme", "light_theme" => "Light Theme", "automatic"=> "Αυτόματο", + "main_color" => "Κύριο χρώμα", + "accent_color" => "Χρώμα επισήμανσης", + "hover_color" => "Χρώμα πάνω από", + "save_custom_colors" => "Αποθήκευση προσαρμοσμένων χρωμάτων", + "reset_custom_colors" => "Επαναφορά προεπιλεγμένων χρωμάτων", + "custom_css" => "Προσαρμοσμένο CSS", + "save_custom_css" => "Αποθήκευση προσαρμοσμένου CSS", "calculate_monthly_price" => "Υπολογισμός και εμφάνιση της μηνιαίας τιμής για όλες τις συνδρομές", "convert_prices" => "Πάντα να μετατρέπει και να εμφανίζει τις τιμές στο κύριο νόμισμά μου (πιο αργό)", "hide_disabled_subscriptions" => "Απόκρυψη απενεργοποιημένων συνδρομών", diff --git a/includes/i18n/en.php b/includes/i18n/en.php index 1a5ba713a..5edfffb17 100644 --- a/includes/i18n/en.php +++ b/includes/i18n/en.php @@ -182,6 +182,13 @@ "dark_theme" => "Dark Theme", "light_theme" => "Light Theme", "automatic"=> "Automatic", + "main_color" => "Main Color", + "accent_color" => "Accent Color", + "hover_color" => "Hover Color", + "save_custom_colors" => "Save Custom Colors", + "reset_custom_colors" => "Reset Custom Colors", + "custom_css" => "Custom CSS", + "save_custom_css" => "Save Custom CSS", "calculate_monthly_price" => "Calculate and show monthly price for all subscriptions", "convert_prices" => "Always convert and show prices on my main currency (slower)", "hide_disabled_subscriptions" => "Hide disabled subscriptions", diff --git a/includes/i18n/es.php b/includes/i18n/es.php index a6af5ed9f..c879c7608 100644 --- a/includes/i18n/es.php +++ b/includes/i18n/es.php @@ -182,6 +182,13 @@ "dark_theme" => "Tema Oscuro", "light_theme" => "Tema Claro", "automatic"=> "Automático", + "main_color" => "Color Principal", + "accent_color" => "Color de Acento", + "hover_color" => "Color de Hover", + "save_custom_colors" => "Guardar Colores Personalizados", + "reset_custom_colors" => "Restablecer Colores Personalizados", + "custom_css" => "CSS Personalizado", + "save_custom_css" => "Guardar CSS Personalizado", "calculate_monthly_price" => "Calcular y mostrar el precio mensual de todas las suscripciones", "convert_prices" => "Convertir y mostrar siempre los precios en mi moneda principal (más lento)", "hide_disabled_subscriptions" => "Ocultar suscripciones desactivadas", diff --git a/includes/i18n/fr.php b/includes/i18n/fr.php index 1833a0b06..dade8583b 100644 --- a/includes/i18n/fr.php +++ b/includes/i18n/fr.php @@ -182,6 +182,13 @@ "dark_theme" => "Thème sombre", "light_theme" => "Thème clair", "automatic"=> "Automatique", + "main_color" => "Couleur principale", + "accent_color" => "Couleur d'accent", + "hover_color" => "Couleur de survol", + "save_custom_colors" => "Enregistrer les couleurs personnalisées", + "reset_custom_colors" => "Réinitialiser les couleurs personnalisées", + "custom_css" => "CSS personnalisé", + "save_custom_css" => "Enregistrer le CSS personnalisé", "calculate_monthly_price" => "Calculer et afficher le prix mensuel pour tous les abonnements", "convert_prices" => "Convertir toujours et afficher les prix dans ma devise principale (plus lent)", "hide_disabled_subscriptions" => "Masquer les abonnements désactivés", diff --git a/includes/i18n/it.php b/includes/i18n/it.php index 7e3ca1aad..9879b73a8 100644 --- a/includes/i18n/it.php +++ b/includes/i18n/it.php @@ -190,6 +190,13 @@ "dark_theme" => 'Tema scuro', "light_theme" => 'Tema chiaro', "automatic" => "Automatico", + "main_color" => "Colore principale", + "accent_color" => "Colore di accento", + "hover_color" => "Colore al passaggio del mouse", + "save_custom_colors" => "Salva colori personalizzati", + "reset_custom_colors" => "Ripristina colori personalizzati", + "custom_css" => "CSS personalizzato", + "save_custom_css" => "Salva CSS personalizzato", 'calculate_monthly_price' => 'Calcola e mostra il prezzo mensile per tutti gli abbonamenti', 'convert_prices' => 'Converti sempre e mostra i prezzi nella mia valuta principale (più lento)', "hide_disabled_subscriptions" => 'Nascondi gli abbonamenti disattivati', diff --git a/includes/i18n/jp.php b/includes/i18n/jp.php index ec9d80249..189bd3785 100644 --- a/includes/i18n/jp.php +++ b/includes/i18n/jp.php @@ -182,6 +182,13 @@ "dark_theme" => "ダークテーマ", "light_theme" => "ライトテーマ", "automatic"=> "自動", + "main_color" => "メインカラー", + "accent_color" => "アクセントカラー", + "hover_color" => "ホバーカラー", + "save_custom_colors" => "カスタムカラーを保存", + "reset_custom_colors" => "カスタムカラーをリセット", + "custom_css" => "カスタムCSS", + "save_custom_css" => "カスタムCSSを保存", "calculate_monthly_price" => "すべての定期購入の月額料金を計算して表示する", "convert_prices" => "常にメイン通貨で価格を換算して表示する (遅い)", "hide_disabled_subscriptions" => "無効な定期購入を非表示にする", diff --git a/includes/i18n/ko.php b/includes/i18n/ko.php index 8dec8f5f2..3ec115251 100644 --- a/includes/i18n/ko.php +++ b/includes/i18n/ko.php @@ -183,6 +183,13 @@ "dark_theme" => "다크 테마", "light_theme" => "라이트 테마", "automatic"=> "자동", + "main_color" => "메인 색상", + "accent_color" => "강조 색상", + "hover_color" => "마우스 호버 색상", + "save_custom_colors" => "커스텀 색상 저장", + "reset_custom_colors" => "커스텀 색상 리셋", + "custom_css" => "커스텀 CSS", + "save_custom_css" => "커스텀 CSS 저장", "calculate_monthly_price" => "모든 구독에 대한 월별 요금을 계산하고 표시", "convert_prices" => "항상 기본 통화로 가격을 환산하고 표시 (느림)", "hide_disabled_subscriptions" => "비활성화된 구독 숨기기", diff --git a/includes/i18n/pl.php b/includes/i18n/pl.php index 5eb9d129b..bb602845f 100644 --- a/includes/i18n/pl.php +++ b/includes/i18n/pl.php @@ -182,6 +182,13 @@ "dark_theme" => "Przełącz na jasny/ciemny motyw", "light_theme" => "Przełącz na ciemny/jasny motyw", "automatic"=> "Automatycznie", + "main_color" => "Główny kolor", + "accent_color" => "Kolor akcentowy", + "hover_color" => "Kolor najechania", + "save_custom_colors" => "Zapisz niestandardowe kolory", + "reset_custom_colors" => "Resetuj niestandardowe kolory", + "custom_css" => "Niestandardowy CSS", + "save_custom_css" => "Zapisz niestandardowy CSS", "calculate_monthly_price" => "Oblicz i pokaż miesięczną cenę wszystkich subskrypcji", "convert_prices" => "Zawsze przeliczaj i pokazuj ceny w mojej głównej walucie (wolniej)", "hide_disabled_subscriptions" => "Ukryj wyłączone subskrypcje", diff --git a/includes/i18n/pt.php b/includes/i18n/pt.php index a2c464685..828f990d4 100644 --- a/includes/i18n/pt.php +++ b/includes/i18n/pt.php @@ -182,6 +182,13 @@ "dark_theme" => "Tema Escuro", "light_theme" => "Tema Claro", "automatic"=> "Automático", + "main_color" => "Cor Principal", + "accent_color" => "Cor de Destaque", + "hover_color" => "Cor de Hover", + "save_custom_colors" => "Guardar Cores Personalizadas", + "reset_custom_colors" => "Repor Cores Personalizadas", + "custom_css" => "CSS Personalizado", + "save_custom_css" => "Guardar CSS Personalizado", "calculate_monthly_price" => "Calcular e mostrar preço mensal para todas as subscrições", "convert_prices" => "Converter e mostrar todas as subscrições na moeda principal (mais lento)", "hide_disabled_subscriptions" => "Esconder subscrições desactivadas", diff --git a/includes/i18n/pt_br.php b/includes/i18n/pt_br.php index ce28b038f..c1be7d9c2 100644 --- a/includes/i18n/pt_br.php +++ b/includes/i18n/pt_br.php @@ -182,6 +182,13 @@ "dark_theme" => "Tema Escuro", "light_theme" => "Tema Claro", "automatic" => "Automático", + "main_color" => "Cor principal", + "accent_color" => "Cor de destaque", + "hover_color" => "Cor de destaque (hover)", + "save_custom_colors" => "Salvar Cores Personalizadas", + "reset_custom_colors" => "Redefinir Cores Personalizadas", + "custom_css" => "CSS Personalizado", + "save_custom_css" => "Salvar CSS Personalizado", "calculate_monthly_price" => "Calcular e exibir o custo mensal para todas as assinaturas", "convert_prices" => "Sempre converter e exibir preços na moeda principal (mais lento)", "hide_disabled_subscriptions" => "Ocultar assinaturas desativadas", diff --git a/includes/i18n/ru.php b/includes/i18n/ru.php index c4a42b4e1..4282566a8 100644 --- a/includes/i18n/ru.php +++ b/includes/i18n/ru.php @@ -182,6 +182,13 @@ "dark_theme" => "Темная тема", "light_theme" => "Светлая тема", "automatic"=> "Автоматически", + "main_color" => "Основной цвет", + "accent_color" => "Акцентный цвет", + "hover_color" => "Цвет при наведении", + "save_custom_colors" => "Сохранить пользовательские цвета", + "reset_custom_colors" => "Сбросить пользовательские цвета", + "custom_css" => "Пользовательский CSS", + "save_custom_css" => "Сохранить пользовательский CSS", "calculate_monthly_price" => "Рассчитать и показать ежемесячную цену для всех подписок", "convert_prices" => "Всегда конвертировать и показывать цены в моей основной валюте (медленнее)", "hide_disabled_subscriptions" => "Скрыть отключенные подписки", diff --git a/includes/i18n/sl.php b/includes/i18n/sl.php index 9fc33e49b..5672f2eb6 100644 --- a/includes/i18n/sl.php +++ b/includes/i18n/sl.php @@ -182,6 +182,13 @@ "dark_theme" => "Temna tema", "light_theme" => "Svetla tema", "automatic"=> "Samodejno", + "main_color" => "Glavna barva", + "accent_color" => "Poudarna barva", + "hover_color" => "Barva ob hoverju", + "save_custom_colors" => "Shrani barve po meri", + "reset_custom_colors" => "Ponastavi barve po meri", + "custom_css" => "CSS po meri", + "save_custom_css" => "Shrani CSS po meri", "calculate_monthly_price" => "Izračunaj in prikaži mesečno ceno za vse naročnine", "convert_prices" => "Vedno pretvori in prikaži cene v moji glavni valuti (počasneje)", "hide_disabled_subscriptions" => "Skrij onemogočene naročnine", diff --git a/includes/i18n/sr.php b/includes/i18n/sr.php index 4e1e5452b..eba5e1d8c 100644 --- a/includes/i18n/sr.php +++ b/includes/i18n/sr.php @@ -181,6 +181,13 @@ "dark_theme" => "Тамна тема", "light_theme" => "Светла тема", "automatic"=> "Аутоматски", + "main_color" => "Главна боја", + "accent_color" => "Акцент боја", + "hover_color" => "Боја приликом преласка", + "save_custom_colors" => "Сачувај прилагођене боје", + "reset_custom_colors" => "Ресетуј прилагођене боје", + "custom_css" => "Прилагођени CSS", + "save_custom_css" => "Сачувај прилагођени CSS", "calculate_monthly_price" => "Израчунајте и прикажите месечну цену за све претплате", "convert_prices" => "Увек конвертујте и прикажите цене на мојој главној валути (спорије)", "hide_disabled_subscriptions" => "Сакриј онемогућене претплате", diff --git a/includes/i18n/sr_lat.php b/includes/i18n/sr_lat.php index 3296b62df..2535d0373 100644 --- a/includes/i18n/sr_lat.php +++ b/includes/i18n/sr_lat.php @@ -182,6 +182,13 @@ "dark_theme" => "Tamna tema", "light_theme" => "Svetla tema", "automatic"=> "Automatski", + "main_color" => "Glavna boja", + "accent_color" => "Akcentna boja", + "hover_color" => "Boja prilikom prelaska", + "save_custom_colors" => "Sačuvaj prilagođene boje", + "reset_custom_colors" => "Resetuj prilagođene boje", + "custom_css" => "Prilagođeni CSS", + "save_custom_css" => "Sačuvaj prilagođeni CSS", "calculate_monthly_price" => "Izračunaj i prikaži mesečnu cenu za sve pretplate", "convert_prices" => "Uvek konvertuj i prikaži cene u mojoj glavnoj valuti (sporije)", "hide_disabled_subscriptions" => "Sakrij onemogućene pretplate", diff --git a/includes/i18n/tr.php b/includes/i18n/tr.php index 6d48f1ffc..bf08e2ab7 100644 --- a/includes/i18n/tr.php +++ b/includes/i18n/tr.php @@ -182,6 +182,13 @@ "dark_theme" => "Koyu Temayı", "light_theme" => "Açık Temayı", "automatic"=> "Otomatik", + "main_color" => "Ana", + "accent_color" => "Vurgu", + "hover_color" => "Üzerine gelindiğinde", + "save_custom_colors" => "Özel Renkleri Kaydet", + "reset_custom_colors" => "Özel Renkleri Sıfırla", + "custom_css" => "Özel CSS", + "save_custom_css" => "Özel CSS'yi Kaydet", "calculate_monthly_price" => "Tüm aboneliklerin aylık fiyatını hesaplayın ve gösterin", "convert_prices" => "Fiyatları her zaman ana para birimimde dönüştürün ve gösterin (daha yavaş)", "hide_disabled_subscriptions" => "Devre dışı bırakılan abonelikleri gizle", diff --git a/includes/i18n/zh_cn.php b/includes/i18n/zh_cn.php index 916830620..617b444b9 100644 --- a/includes/i18n/zh_cn.php +++ b/includes/i18n/zh_cn.php @@ -190,6 +190,13 @@ "dark_theme" => "深色主题", "light_theme" => "浅色主题", "automatic"=> "自动", + "main_color" => "主色", + "accent_color" => "强调色", + "hover_color" => "悬停颜色", + "save_custom_colors" => "保存自定义颜色", + "reset_custom_colors" => "重置自定义颜色", + "custom_css" => "自定义 CSS", + "save_custom_css" => "保存自定义 CSS", "calculate_monthly_price" => "计算并显示所有订阅的月价格", "convert_prices" => "始终按我的主要货币转换和显示价格（较慢）", "hide_disabled_subscriptions" => "隐藏已停用的订阅", diff --git a/includes/i18n/zh_tw.php b/includes/i18n/zh_tw.php index 18bf8b1ed..aafc3f68f 100644 --- a/includes/i18n/zh_tw.php +++ b/includes/i18n/zh_tw.php @@ -182,6 +182,13 @@ "dark_theme" => "深色主題", "light_theme" => "淺色主題", "automatic"=> "自動", + "main_color" => "主要顏色", + "accent_color" => "強調顏色", + "hover_color" => "懸停顏色", + "save_custom_colors" => "儲存自訂顏色", + "reset_custom_colors" => "重設自訂顏色", + "custom_css" => "自訂 CSS", + "save_custom_css" => "儲存自訂 CSS", "calculate_monthly_price" => "計算並顯示所有訂閱的每月價格", "convert_prices" => "始終按照我的主要貨幣單位轉換和顯示價格（較慢）", "hide_disabled_subscriptions" => "隱藏已停用的訂閱", diff --git a/settings.php b/settings.php index eb758e352..35a18b988 100644 --- a/settings.php +++ b/settings.php @@ -119,7 +119,8 @@ class="avatar-option" data-src="images/uploads/logos/avatars/" />
- +
@@ -203,16 +204,16 @@ class="avatar-option" data-src="images/uploads/logos/avatars/" /> } ?> +
+ +

-
- -
@@ -778,7 +779,7 @@ class="capitalize">:
+ onClick="addCategoryButton()" class="thin mobile-grow" />
@@ -869,7 +870,7 @@ class="capitalize">:
+ onClick="addCurrencyButton()" class="thin mobile-grow" />

@@ -953,7 +954,7 @@ class="capitalize">:

+ onClick="addFixerKeyButton()" class="thin mobile-grow" />
@@ -1066,26 +1067,26 @@ class="hidden-input">
-
-

-
- - - -
+

+
+ + +
+
+

@@ -1144,24 +1145,31 @@ class="theme-preview purple

-
-
+
+
+ +
+
+ +
+
+
-
- - -
+
+
+ +
diff --git a/styles/styles.css b/styles/styles.css index 94ef52b52..80e833f45 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -569,6 +569,10 @@ main > .contain { margin-bottom: 0px; } +.account-section .account-settings-theme h3 { + margin-bottom: 24px; +} + .user-form { display: flex; flex-direction: column; @@ -1090,12 +1094,15 @@ input[type="button"].warning-button { border-color: #f45a40; } -input[type="button"].warning-button:hover { +input[type="button"].warning-button:hover, +button.button.warning-button:hover { background-color: #ef8674; border-color: #ef8674; } -input[type="submit"]:hover { +input[type="submit"]:hover, +input[type="button"]:hover, +button.button:hover { background-color: var(--hover-color); border-color: var(--hover-color); } @@ -1667,7 +1674,7 @@ button.dark-theme-button i { .statistic > span { font-size: 42px; - color: var(--hover-color); + color: var(--main-color); } .statistic > .title { @@ -1975,11 +1982,10 @@ button.dark-theme-button i { background-color: #5e42cd; } -.color-picker-wrapper { +.custom-colors { display: flex; flex-direction: row; - gap: 16px; - + gap: 12px; } .color-picker { @@ -2170,4 +2176,14 @@ button.dark-theme-button i { .subscription-modal img { max-width: 135px; -} \ No newline at end of file +} + +.grow { + flex-grow: 1; +} + +@media (max-width: 768px) { + .mobile-grow { + flex-grow: 1; + } +}