@import url("main.css"); :root { --accent-color: oklch(65.33% 0.158 247.76); } form label:after { content: ":"; } form :is(input[type=text], textarea) { background-color: var(--fg-color); border: none; border-radius: .25lh; color: var(--text-color, white); padding: .5em; font-family: sans-serif; } /* quick info box */ form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 1rem 2rem; } form > * { display: flex; align-items: center; gap: 1rem; } form :is(input[type=text], textarea) { flex-grow: 1; } /* switch */ label:has(#is-dataset) { gap: 0; } #is-dataset { display: none; } #is-dataset-toggle { margin-inline: 1ch; padding-inline: .5ch; width: 2rem; height: 1lh; background-color: var(--fg-color); border-radius: .5lh; position: relative; } #is-dataset-toggle::before { content: ""; position: absolute; top: 0; --switch-gap: 2px; --size: calc(1lh - 2 * var(--switch-gap)); width: var(--size); height: var(--size); border-radius: 50%; margin: var(--switch-gap); box-sizing: border-box; background-color: var(--text-color); transition: inset-inline ease-out 50ms; filter: drop-shadow(rgba(0, 0, 0, .8) 0 0 .25rem); } #is-dataset:not(:checked) + #is-dataset-toggle::before { left: 0; } #is-dataset:checked + #is-dataset-toggle::before { inset-inline: calc(2rem - .5lh - var(--switch-gap)) 0; } /* short description box */ form :has(#short-description) { grid-column: 1 / 3; } /* full description box */ #full-description-box { grid-column: 1 / 4; margin: 1rem 0; align-items: start; } #full-description { height: 15rem; box-sizing: border-box; } /* button bar */ #btn-bar { grid-column: 1 / 4; justify-content: end; gap: 1rem; } /* button styling */ .btn { padding: .5lh 1lh; border: none; border-radius: .5lh; --btn-color: var(--fg-color); background-color: var(--btn-color); color: var(--text-color); font-weight: bold; font-size: 1rem; transition: background-color 100ms, filter 200ms; transition-timing-function: ease-out; --drop-shadow-opacity: .5; --drop-shadow-offset-y: 0; --drop-shadow-blur: .25rem; filter: drop-shadow( rgba(0, 0, 0, var(--drop-shadow-opacity)) 0 var(--drop-shadow-offset-y) var(--drop-shadow-blur) ); } .btn:hover { background-color: color-mix(in oklab, var(--btn-color) 80%, var(--bg-color)); --drop-shadow-opacity: .8; --drop-shadow-offset-y: .25rem; --drop-shadow-blur: .4rem; } .btn.suggested { --btn-color: var(--accent-color); }