Something went wrong. Try again.
A very simple bookmarking webapp pinboard.ing
Something went wrong. Try again.
3.1 kB · 126 lines
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127.bookmark-edit-modal { position: fixed; inset: 0; margin: auto; width: min(90vw, 32rem); max-height: min(80vh, 600px); padding: calc(var(--spacing) * 3); border: none; border-radius: var(--radius); background: var(--page-bg); color: var(--primary-text); flex-direction: column; gap: calc(var(--spacing) * 1); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
opacity: 1; transform: scale(1) translateY(0); transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.32, 0.72, 0, 1), display 0.25s ease allow-discrete;
@starting-style { opacity: 0; transform: scale(0.95) translateY(0.5rem); }
&:popover-open { display: flex; }
&::backdrop { background: hsl(from var(--primary) h s 3% / 0.2); backdrop-filter: blur(4px); transition: background 0.25s ease, backdrop-filter 0.25s ease, display 0.25s ease allow-discrete;
@starting-style { background: hsl(from var(--primary) h s 3% / 0); backdrop-filter: blur(0); } }
& > .button-ghost { align-self: flex-end; }
& > div.title { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(var(--spacing) * 0.5);
h2 { font-size: 1.25rem; font-weight: 700; } }}
.edit-form { display: flex; flex-direction: column; gap: calc(var(--spacing) * 2);
.input-group { display: flex; flex-direction: column; gap: calc(var(--spacing) * 0.5);
label { font-size: 0.8rem; font-weight: 600; color: oklch(from var(--primary-text) l c h / 0.7); }
input, textarea { width: 100%; padding: calc(var(--spacing) * 1); border: 1px solid oklch(from var(--primary-text) l c h / 0.15); border-radius: var(--radius); font-size: 0.9rem; font-family: inherit; color: var(--primary-text); background: transparent; outline: none; transition: all 0.15s ease;
&::placeholder { color: oklch(from var(--primary-text) l c h / 0.3); }
&:focus { border-color: var(--primary); box-shadow: 0 0 0 3px oklch(from var(--primary) l c h / 0.12); }
&:disabled { opacity: 0.6; cursor: not-allowed; } }
textarea { resize: vertical; min-height: 5rem; } }
button[type="submit"] { align-self: flex-end; }}
.bookmark-edit-modal .error-message { margin-top: calc(var(--spacing) * 0.5); padding: calc(var(--spacing) * 1); background: oklch(0.65 0.25 25 / 0.08); border: 1px solid oklch(0.65 0.25 25 / 0.2); border-radius: var(--radius); color: oklch(0.5 0.2 25); font-size: 0.85rem;}