diff --git a/Extension/auto-image-styles.css b/Extension/auto-image-styles.css index 2da2d0c..28d7d3c 100644 --- a/Extension/auto-image-styles.css +++ b/Extension/auto-image-styles.css @@ -1923,3 +1923,161 @@ margin-right: 6px; } +/* Account Management Styles */ +.wplace-account-info { + display: flex; + flex-direction: column; + gap: 12px; + margin-bottom: 12px; + padding: 12px; + background: var(--wplace-secondary); + border: 1px solid var(--wplace-border-color); + border-radius: var(--wplace-radius); +} + +.wplace-account-current { + display: flex; + align-items: center; + gap: 8px; + font-size: 14px; + color: var(--wplace-text); +} + +.wplace-account-current i { + color: var(--wplace-highlight); + width: 16px; +} + +.wplace-account-current strong { + color: var(--wplace-success); +} + +.wplace-account-switch { + display: flex; + align-items: center; + gap: 8px; +} + +.wplace-toggle-switch { + display: flex; + align-items: center; + gap: 10px; + cursor: pointer; + user-select: none; +} + +.wplace-toggle-switch input[type="checkbox"] { + display: none; +} + +.wplace-toggle-slider { + position: relative; + width: 44px; + height: 24px; + background: var(--wplace-accent); + border: 1px solid var(--wplace-border-color); + border-radius: 12px; + transition: all 0.3s ease; +} + +.wplace-toggle-slider:before { + content: ''; + position: absolute; + top: 2px; + left: 2px; + width: 18px; + height: 18px; + background: var(--wplace-text); + border-radius: 50%; + transition: all 0.3s ease; +} + +.wplace-toggle-switch input:checked + .wplace-toggle-slider { + background: var(--wplace-success); + border-color: var(--wplace-success); +} + +.wplace-toggle-switch input:checked + .wplace-toggle-slider:before { + transform: translateX(20px); + background: white; +} + +.wplace-toggle-label { + font-size: 14px; + color: var(--wplace-text); + font-weight: 500; +} + +.wplace-account-list { + max-height: 200px; + overflow-y: auto; + border: 1px solid var(--wplace-border-color); + border-radius: var(--wplace-radius); + background: var(--wplace-secondary); +} + +.wplace-account-item { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 12px; + border-bottom: 1px solid var(--wplace-border-color); + transition: all 0.2s ease; +} + +.wplace-account-item:last-child { + border-bottom: none; +} + +.wplace-account-item:hover { + background: var(--wplace-accent); +} + +.wplace-account-item.current { + background: var(--wplace-success)20; + border-left: 3px solid var(--wplace-success); +} + +.wplace-account-info-item { + display: flex; + align-items: center; + gap: 8px; +} + +.wplace-account-number { + display: flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + background: var(--wplace-highlight); + color: white; + border-radius: 50%; + font-size: 12px; + font-weight: bold; +} + +.wplace-account-name { + font-size: 14px; + color: var(--wplace-text); + font-weight: 500; +} + +.wplace-account-status { + font-size: 12px; + color: var(--wplace-text-secondary); +} + +.wplace-account-placeholder { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + padding: 20px; + color: var(--wplace-text-secondary); + font-style: italic; +} + +.wplace-account-placeholder i { + color: var(--wplace-warning); +}