updated styling and translations

This commit is contained in:
2026-02-06 02:49:31 +03:00
parent 01963218ab
commit f756c665fe
26 changed files with 3059 additions and 749 deletions

View File

@@ -7,7 +7,7 @@ button {
color: var(--button-text);
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.85rem;
font-size: var(--text-base, 13px);
font-family: inherit;
font-weight: 500;
display: inline-flex;
@@ -15,7 +15,7 @@ button {
justify-content: center;
gap: 5px;
white-space: nowrap;
line-height: 1.2;
line-height: var(--leading-tight, 1.25);
}
button:hover {
@@ -81,7 +81,7 @@ button:disabled {
.icon-btn:hover {
opacity: 1;
background: rgba(242, 168, 101, 0.15);
background: rgba(255, 140, 0, 0.15);
color: var(--accent);
}
@@ -89,42 +89,56 @@ button:disabled {
pointer-events: none;
}
/* Toggle Switches */
.toggle-btn {
/* Shared Switch (label + input + span) used in popup and list manager */
.switch-wrapper {
position: relative;
display: inline-block;
width: 40px;
height: 22px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--input-border);
border-radius: 11px;
position: relative;
cursor: pointer;
transition: all 0.2s ease;
padding: 0;
flex-shrink: 0;
}
.toggle-btn::after {
content: '';
.switch-input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
width: 16px;
}
.switch-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--input-border);
transition: 0.3s;
border-radius: 11px;
}
.switch-slider:before {
position: absolute;
content: "";
height: 16px;
background: var(--text-color);
border-radius: 50%;
top: 2px;
width: 16px;
left: 2px;
transition: all 0.2s ease;
bottom: 2px;
background-color: white;
transition: 0.3s;
border-radius: 50%;
}
.toggle-btn.active {
background: var(--accent);
border-color: var(--accent);
.switch-input:checked + .switch-slider {
background-color: var(--accent);
}
.toggle-btn.active::after {
left: 20px;
background: var(--accent-text);
.switch-input:checked + .switch-slider:before {
transform: translateX(18px);
}
/* Switch Toggle (Checkbox Style) */
input[type="checkbox"].switch {
-webkit-appearance: none;
@@ -254,9 +268,10 @@ select {
border: 1px solid var(--input-border);
background-color: var(--input-bg);
color: var(--text-color);
font-size: 0.85em;
font-size: var(--text-base, 13px);
box-sizing: border-box;
font-family: inherit;
line-height: var(--leading-normal, 1.4);
}
input[type="text"]:focus,
@@ -352,3 +367,79 @@ input[type="color"]::-moz-color-swatch {
#themeToggle:checked + .theme-icon::before {
content: "\f186"; /* moon icon */
}
/* Word list eye toggle (active/disabled) replaces switch in word items */
.word-item-eye-toggle {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
min-width: 28px;
margin-right: 6px;
border: none;
border-radius: 4px;
cursor: pointer;
background: transparent;
color: var(--text-color);
opacity: 0.7;
flex-shrink: 0;
transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.word-item-eye-toggle:hover {
opacity: 1;
background: var(--highlight-tag);
color: var(--accent);
}
.word-item-eye-input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.word-item-eye-icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
pointer-events: none;
}
.word-item-eye-icon i {
position: absolute;
font-size: 14px;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.2s ease;
}
/* Active state: show eye, hide eye-slash */
.word-item-eye-input:checked ~ .word-item-eye-icon .eye-active {
opacity: 1;
color: var(--accent);
}
.word-item-eye-input:checked ~ .word-item-eye-icon .eye-disabled {
opacity: 0;
pointer-events: none;
}
/* Disabled state: show eye-slash, hide eye */
.word-item-eye-input:not(:checked) ~ .word-item-eye-icon .eye-active {
opacity: 0;
pointer-events: none;
}
.word-item-eye-input:not(:checked) ~ .word-item-eye-icon .eye-disabled {
opacity: 1;
color: var(--text-color);
}