dialog { header { margin-bottom: 16px; padding: 8px !important; } &>article { /* Animate when opening */ animation-name: zoomIn; animation-duration: 150ms; animation-timing-function: ease; } &.closing { /* Animate when closing */ animation-name: fadeOut; animation-duration: 150ms; animation-timing-function: ease; } &.closing>article { /* Aniate when closing */ animation-name: zoomOut; animation-duration: 150ms; animation-timing-function: ease; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes zoomIn { 0% { transform: scale(0.9); } 100% { transform: scale(1); } } @keyframes zoomOut { 0% { transform: scale(1); } 100% { transform: scale(0.9); } } .grid>div { min-width: max-content; } .grid>div:nth-child(2) fieldset { float: right; } @media (max-width: 768px) { .grid>div:nth-child(2) fieldset { float: unset; } .grid { grid-row-gap: 0; } } article { padding-bottom: 1em; form { overflow: hidden; input[type="submit"] { margin-top: 1em; } div.widget.radioselect { display: flex; grid-column-gap: 1em; } } } input[type="date"] { margin: 0px; } .tag-input { margin-bottom: var(--pico-spacing); } .rating-editor { font-size: 250%; padding-bottom: 1em; } } @media (max-width: 768px) { dialog { .rating-editor { font-size: 250%; } div.grid:has(.rating-editor) { gap: 0; } } } @media (min-width: 1280px) { dialog { article { max-width: 800px; } } }