diff --git a/public/admin.css b/public/admin.css index d33eacb..6a6a075 100644 --- a/public/admin.css +++ b/public/admin.css @@ -29,6 +29,17 @@ input, textarea, select { background: white; color: var(--ink); } +input[type="color"] { + width: 100%; + height: 44px; + padding: 4px; + cursor: pointer; +} +input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } +input[type="color"]::-webkit-color-swatch { + border: 0; + border-radius: 4px; +} label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; } .hidden { display: none !important; } @@ -73,6 +84,40 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; } .brand button, .sitebar button { background: #edf3ef; color: var(--ink); } .switch { display: flex; align-items: center; gap: 8px; } .switch input { width: auto; } +.setting-switch { + justify-content: space-between; + flex-direction: row-reverse; + border: 1px solid var(--line); + border-radius: 8px; + padding: 10px 12px; + background: #f8fbf9; + color: var(--ink); +} +.setting-switch input { + appearance: none; + width: 42px; + height: 24px; + border: 0; + border-radius: 999px; + padding: 0; + background: #cbd6d0; + position: relative; + cursor: pointer; +} +.setting-switch input:before { + position: absolute; + top: 3px; + left: 3px; + width: 18px; + height: 18px; + border-radius: 50%; + background: white; + content: ""; + transition: transform .16s ease; +} +.setting-switch input:checked { background: var(--brand); } +.setting-switch input:checked:before { transform: translateX(18px); } +.color-field input { margin-top: 2px; } .list-tools { padding: 10px 14px; border-bottom: 1px solid var(--line); diff --git a/public/admin.html b/public/admin.html index 8ef2b17..e201e27 100644 --- a/public/admin.html +++ b/public/admin.html @@ -78,16 +78,18 @@ - + -