diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index add7e6d..03c0590 100644 --- a/src/components/Sidebar.vue +++ b/src/components/Sidebar.vue @@ -89,6 +89,11 @@ defineProps({ color: var(--text-strong); } +:global(:root[data-theme="light"]) .nav-item:hover { + background-color: rgba(15, 23, 42, 0.1); + color: var(--text-strong); +} + .nav-item.router-link-active { color: var(--primary-accent); background-color: var(--toggle-bg); diff --git a/src/components/tools/Passwords.vue b/src/components/tools/Passwords.vue index eda7eb4..5db875e 100644 --- a/src/components/tools/Passwords.vue +++ b/src/components/tools/Passwords.vue @@ -208,65 +208,13 @@ const generatePasswords = () => { min-width: 140px; } -.checkbox-label { - display: flex; - align-items: center; - gap: 10px; - cursor: pointer; - user-select: none; +.input-wrapper label { color: var(--text-secondary); - font-weight: 500; - white-space: nowrap; + font-weight: 600; + margin-bottom: 0.2rem; } +/* Custom Checkbox styles are now global in style.css */ -/* Custom Checkbox */ -.checkbox-label input { - position: absolute; - opacity: 0; - cursor: pointer; - height: 0; - width: 0; -} - -.checkmark { - position: relative; - height: 20px; - width: 20px; - background-color: var(--toggle-bg); - border: 1px solid var(--toggle-border); - border-radius: 4px; - transition: all 0.3s ease; -} - -.checkbox-label:hover .checkmark { - border-color: var(--toggle-hover-border); -} - -.checkbox-label input:checked ~ .checkmark { - background-color: var(--primary-accent); - border-color: var(--primary-accent); - box-shadow: 0 0 10px var(--primary-accent); -} - -.checkmark:after { - content: ""; - position: absolute; - display: none; -} - -.checkbox-label input:checked ~ .checkmark:after { - display: block; -} - -.checkbox-label .checkmark:after { - left: 6px; - top: 2px; - width: 5px; - height: 10px; - border: solid #000; - border-width: 0 2px 2px 0; - transform: rotate(45deg); -} /* Number Control */ .number-control { @@ -288,7 +236,7 @@ const generatePasswords = () => { height: auto; min-height: 40px; cursor: pointer; - transition: background 0.2s; + transition: all 0.2s; padding: 0; margin: 0; display: flex; @@ -300,6 +248,11 @@ const generatePasswords = () => { background: var(--button-hover-bg); } +:global(:root[data-theme="light"]) .control-btn:hover { + background: rgba(0, 0, 0, 0.1); + color: var(--primary-accent); +} + .number-input { background: none; border: none; diff --git a/src/components/tools/QrCode.vue b/src/components/tools/QrCode.vue index 87585b5..731561f 100644 --- a/src/components/tools/QrCode.vue +++ b/src/components/tools/QrCode.vue @@ -195,23 +195,9 @@ const triggerDownload = (blob, filename) => { } .tool-textarea { - width: 100%; - padding: 1rem; - border-radius: 8px; - background: rgba(0, 0, 0, 0.2); - border: 1px solid var(--glass-border); - color: var(--text-color); - font-size: 1rem; - resize: vertical; min-height: 80px; } -.tool-textarea:focus { - outline: none; - border-color: var(--primary-accent); - box-shadow: 0 0 0 2px rgba(0, 242, 254, 0.1); -} - .controls-section { display: flex; gap: 1.5rem; @@ -232,12 +218,7 @@ const triggerDownload = (blob, filename) => { } .select-input { - padding: 0.5rem; - border-radius: 6px; - background: rgba(0, 0, 0, 0.2); - border: 1px solid var(--glass-border); - color: var(--text-color); - min-width: 120px; + min-width: 140px; } .preview-section { diff --git a/src/components/tools/UrlCleaner.vue b/src/components/tools/UrlCleaner.vue index 0f03c2e..30947c8 100644 --- a/src/components/tools/UrlCleaner.vue +++ b/src/components/tools/UrlCleaner.vue @@ -122,7 +122,7 @@ onUnmounted(() => { @@ -269,24 +269,10 @@ onUnmounted(() => { .url-input { flex: 1; - padding: 0.8rem 1rem; - border-radius: 8px; - border: 1px solid var(--toggle-border); - background: var(--toggle-bg); - color: var(--text-color); - font-size: 1rem; - outline: none; - transition: all 0.2s; - resize: vertical; - min-height: 46px; + min-height: 120px; font-family: inherit; } -.url-input:focus { - border-color: var(--primary-accent); - box-shadow: 0 0 0 2px rgba(var(--primary-accent-rgb), 0.2); -} - .watch-toggle { display: flex; justify-content: flex-end; diff --git a/src/components/tools/UrlCleanerExceptionsModal.vue b/src/components/tools/UrlCleanerExceptionsModal.vue index a53ddfb..615e24b 100644 --- a/src/components/tools/UrlCleanerExceptionsModal.vue +++ b/src/components/tools/UrlCleanerExceptionsModal.vue @@ -303,7 +303,7 @@ const resetToDefault = (ruleId) => { } :global(:root[data-theme="light"]) .modal-overlay { - background: rgba(0, 0, 0, 0.15); + background: rgba(255, 255, 255, 0.3); } .modal-content { @@ -322,10 +322,7 @@ const resetToDefault = (ruleId) => { color: var(--text-color); } -:global(:root[data-theme="light"]) .modal-content { - background: rgba(255, 255, 255, 0.98); - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); -} + .modal-header { padding: 1.5rem; diff --git a/src/components/tools/common/ExtensionStatus.vue b/src/components/tools/common/ExtensionStatus.vue index 04b9585..4ea2474 100644 --- a/src/components/tools/common/ExtensionStatus.vue +++ b/src/components/tools/common/ExtensionStatus.vue @@ -127,19 +127,23 @@ onUnmounted(() => { padding: 1rem; } +:global(:root[data-theme="light"]) .modal-overlay { + background: rgba(255, 255, 255, 0.3); +} + .modal-content { background: var(--glass-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--glass-border); border-radius: 16px; - padding: 2.5rem; /* Większy padding */ + padding: 2.5rem; max-width: 500px; width: 90%; position: relative; box-shadow: var(--glass-shadow); text-align: center; - color: var(--text-color); /* Wymuś kolor tekstu */ + color: var(--text-color); } .close-btn { diff --git a/src/style.css b/src/style.css index d7f6193..16966dc 100644 --- a/src/style.css +++ b/src/style.css @@ -1,7 +1,10 @@ /* Box sizing reset */ -*, *::before, *::after { +*, +*::before, +*::after { box-sizing: border-box; } + :root { font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; @@ -44,7 +47,8 @@ --header-bg: rgba(0, 0, 0, 0.6); color: var(--text-color); - background-color: #242424; /* Fallback */ + background-color: #242424; + /* Fallback */ background: var(--bg-gradient); background-attachment: fixed; @@ -55,37 +59,37 @@ } :root[data-theme="light"] { - --bg-gradient: radial-gradient(circle at center, #ffffff 0%, #e5e7eb 100%); - --glass-bg: rgba(255, 255, 255, 0.75); - --glass-border: rgba(15, 23, 42, 0.12); - --glass-shadow: 0 8px 32px 0 rgba(15, 23, 42, 0.12); - --text-color: #000000; - --text-strong: #000000; - --text-secondary: #000000; - --text-muted: rgba(0, 0, 0, 0.7); + --bg-gradient: radial-gradient(circle at center, #f8fafc 0%, #e2e8f0 100%); + --glass-bg: rgba(255, 255, 255, 0.85); + --glass-border: rgba(255, 255, 255, 0.8); + --glass-shadow: 0 8px 32px 0 rgba(30, 41, 59, 0.15); + --text-color: #0f172a; + --text-strong: #020617; + --text-secondary: #334155; + --text-muted: #64748b; --accent-cyan: #0ea5e9; --accent-purple: #6366f1; --primary-accent: #0ea5e9; --title-glow: rgba(14, 165, 233, 0.35); - --toggle-bg: rgba(255, 255, 255, 0.85); - --toggle-border: rgba(15, 23, 42, 0.12); - --toggle-shadow: 0 8px 20px rgba(15, 23, 42, 0.12); - --toggle-btn-border: rgba(15, 23, 42, 0.18); - --toggle-hover-border: rgba(15, 23, 42, 0.5); + --toggle-bg: rgba(255, 255, 255, 1); + --toggle-border: rgba(15, 23, 42, 0.2); + --toggle-shadow: 0 4px 12px rgba(15, 23, 42, 0.1); + --toggle-btn-border: rgba(15, 23, 42, 0.15); + --toggle-hover-border: rgba(14, 165, 233, 0.6); --toggle-active-shadow: 0 0 12px rgba(14, 165, 233, 0.25); - --panel-bg: rgba(255, 255, 255, 0.7); + --panel-bg: rgba(255, 255, 255, 0.9); --panel-border: rgba(15, 23, 42, 0.12); --panel-shadow: 0 12px 24px rgba(15, 23, 42, 0.12); - --button-bg: rgba(255, 255, 255, 0.85); - --button-border: rgba(15, 23, 42, 0.16); + --button-bg: rgba(255, 255, 255, 0.7); + --button-border: rgba(255, 255, 255, 0.9); --button-text: #0f172a; - --button-hover-bg: rgba(0, 0, 0, 0.05); + --button-hover-bg: rgba(255, 255, 255, 1); --button-hover-shadow: 0 6px 18px rgba(15, 23, 42, 0.18); --button-active-shadow: 0 0 18px rgba(14, 165, 233, 0.25); --title-gradient: linear-gradient(45deg, #0ea5e9, #6366f1); --ripple-color: rgba(0, 0, 0, 0.1); - --list-hover-bg: rgba(0, 0, 0, 0.05); - --header-bg: rgba(255, 255, 255, 0.9); + --list-hover-bg: rgba(255, 255, 255, 0.5); + --header-bg: rgba(255, 255, 255, 0.6); } body { @@ -185,40 +189,44 @@ body { filter: drop-shadow(0 0 10px var(--title-glow)); } -:root[data-theme="light"] .tool-title { - /* background: none !important; - -webkit-background-clip: unset !important; - background-clip: unset !important; - color: #000000 !important; - -webkit-text-fill-color: #000000 !important; - filter: none !important; */ -} -.tool-textarea { + +.tool-textarea, +.select-input { width: 100%; - height: 100%; padding: 1rem; - background-color: rgba(0, 0, 0, 0.2) !important; + background-color: var(--toggle-bg); border: 1px solid var(--toggle-border); border-radius: 12px; - color: #ffffff !important; /* Explicit white color for dark mode */ - font-family: monospace; + color: var(--text-color); + font-family: inherit; font-size: 1rem; line-height: 1.6; - resize: none; transition: all 0.3s ease; box-sizing: border-box; } -:root[data-theme="light"] .tool-textarea { - color: #000000 !important; - background-color: rgba(255, 255, 255, 0.5) !important; +.tool-textarea { + font-family: monospace; + resize: none; + height: 100%; } -.tool-textarea:focus { +.select-input { + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'%3E%3C/path%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 1rem center; + background-size: 1.2rem; + padding-right: 3rem; + cursor: pointer; +} + +.tool-textarea:focus, +.select-input:focus { outline: none; - border-color: #00f2fe !important; /* Force cyan accent */ - box-shadow: 0 0 0 1px #00f2fe !important; + border-color: var(--primary-accent) !important; + box-shadow: 0 0 0 1px var(--primary-accent) !important; } .result-area { @@ -267,7 +275,8 @@ body { align-items: center; justify-content: center; gap: 8px; - outline: none; /* Remove focus outline */ + outline: none; + /* Remove focus outline */ } /* Global button styles */ @@ -350,6 +359,77 @@ button:focus { input:focus, select:focus, textarea:focus { - border-color: var(--primary-accent); - box-shadow: 0 0 0 1px var(--primary-accent); + border-color: var(--primary-accent) !important; + box-shadow: 0 0 0 1px var(--primary-accent) !important; +} + +/* --- Global Checkbox Styles --- */ +.checkbox-label { + display: flex; + align-items: center; + gap: 10px; + cursor: pointer; + user-select: none; + color: var(--text-secondary); + font-weight: 500; + white-space: nowrap; + transition: color 0.2s; +} + +.checkbox-label:hover { + color: var(--text-color); +} + +.checkbox-label input { + position: absolute; + opacity: 0; + cursor: pointer; + height: 0; + width: 0; +} + +.checkmark { + position: relative; + height: 20px; + width: 20px; + background-color: var(--toggle-bg); + border: 1px solid var(--toggle-border); + border-radius: 4px; + transition: all 0.3s ease; + flex-shrink: 0; +} + +.checkbox-label:hover .checkmark { + border-color: var(--toggle-hover-border); +} + +.checkbox-label input:checked~.checkmark { + background-color: var(--primary-accent); + border-color: var(--primary-accent); + box-shadow: 0 0 10px var(--primary-accent); +} + +.checkmark:after { + content: ""; + position: absolute; + display: none; +} + +.checkbox-label input:checked~.checkmark:after { + display: block; +} + +.checkbox-label .checkmark:after { + left: 6px; + top: 2px; + width: 5px; + height: 10px; + border: solid white; + border-width: 0 2px 2px 0; + transform: rotate(45deg); +} + +:root[data-theme="light"] .checkmark:after { + border-color: white; + /* Keep checkmark white even in light mode if background is primary-accent */ }