/** * ADAKing toolbar styles. * * The toggle button and panel use inline styles from PHP for position so * they always render correctly even if this stylesheet fails to load. * These base styles handle the visual design of the controls. */ /* Toggle button — controlled by .adaking-theme-dark on ----------- */ .adaking-toolbar__toggle { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; cursor: pointer; font-size: 18px; line-height: 1; box-shadow: 0 4px 12px rgba(0,0,0,0.25); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; /* Normal mode: black bg, white icon */ background: #1a1a1a; color: #ffffff; border: 2px solid #3a3a3a; } .adaking-toolbar__toggle:hover { background: #333333; border-color: #555555; } .adaking-toolbar__toggle:focus-visible { outline: 3px solid #1a1a1a; outline-offset: 2px; } /* When dark theme is active on body: white bg, black icon */ body.adaking-theme-dark .adaking-toolbar__toggle { background: #ffffff; color: #1a1a1a; border-color: #cccccc; } body.adaking-theme-dark .adaking-toolbar__toggle:hover { background: #f0f0f0; } body.adaking-theme-dark .adaking-toolbar__toggle:focus-visible { outline-color: #ffffff; } /* Panel -------------------------------------------------------- */ .adaking-toolbar__panel { background: #ffffff; border: 1px solid #d0d0d5; border-radius: 12px; padding: 14px; min-width: 170px; box-shadow: 0 6px 24px rgba(0,0,0,0.18); } /* In dark mode, the panel stays light so controls are legible */ body.adaking-theme-dark .adaking-toolbar__panel { background: #f5f5f5; border-color: #c0c0c0; } /* Button rows -------------------------------------------------- */ .adaking-toolbar__row { display: flex; gap: 6px; margin-bottom: 8px; } .adaking-toolbar__row:last-child { margin-bottom: 0; } .adaking-toolbar__btn { flex: 1; min-height: 36px; padding: 6px 8px; background: #f0f0f0; border: 1px solid #d0d0d5; border-radius: 6px; cursor: pointer; font-weight: 500; font-size: 13px; color: #1a1a1a; transition: background 0.15s ease; } .adaking-toolbar__btn:hover { background: #e0e0e0; } .adaking-toolbar__btn:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 1px; } .adaking-toolbar__close { width: 100%; margin-top: 10px; min-height: 34px; background: #d63638; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 12px; letter-spacing: 0.3px; } .adaking-toolbar__close:hover { background: #b52d31; } .adaking-toolbar__close:focus-visible { outline: 2px solid #d63638; outline-offset: 2px; }