diff --git a/public/css/style.css b/public/css/style.css index bb75912..5e532c6 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -56,7 +56,8 @@ label { color: var(--muted); } -input { +input, +select { width: 100%; padding: 10px 12px; margin-bottom: 16px; @@ -67,7 +68,25 @@ input { font-size: 14px; } -input:focus { +select { + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + /* Chevron stroke color is #8b93a7, matching --muted (data URIs can't reference CSS variables). */ + background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); + background-repeat: no-repeat; + background-position: right 10px center; + background-size: 16px; + padding-right: 32px; +} + +select option { + background: var(--panel); + color: var(--text); +} + +input:focus, +select:focus { outline: none; border-color: var(--accent); } @@ -285,6 +304,11 @@ button.danger { padding: 6px 8px; } +.reader-card .field select { + /* Keep room for the chevron icon within the narrow 90px width. */ + padding-right: 28px; +} + .reader-card .actions { display: flex; flex-wrap: wrap; @@ -339,7 +363,8 @@ button.danger { margin-bottom: 4px; } -.inline-form input { +.inline-form input, +.inline-form select { margin-bottom: 0; }