#interface-metabox-panel .inside { margin: 0; padding: 0; } #blogmarks-settings-metabox-container, .interface-meta-card { display: grid; } .interface-input-radio { display: flex; flex-wrap: wrap; gap: 4px; } .interface-input-radio img { max-width: 100px } .interface-input-radio input[type=radio], .interface-meta-details { display: none } .interface-input-radio input[type=radio] + label:hover { opacity: .7 } .interface-input-radio input[type=radio]:checked + label { border: 1px solid #65bc7b } .interface-meta-card { align-items: center; border-bottom: 1px solid #ede0e0; gap: 10px; padding: 20px; } .blogmarks-available-post-metas p, .interface-meta-card h4 { margin: 0 } .meta-list-item-desc { margin: 0; color: #787878 } .interface-meta-card select { min-width: 30%; width: auto } .interface-meta-wrapper { display: flex; flex-direction: column; border-top: 1px solid #ddd; } .interface-meta-header { background-color: rgba(0, 0, 0, 0.025); position: relative; display: flex; flex-wrap: wrap; } @media (min-width: 576px) { .interface-meta-wrapper { flex-direction: row; min-height: 30rem; } .interface-meta-header { flex-direction: column; flex-basis: 20%; } .interface-meta-content { flex-basis: 80% } } .interface-meta-header:after { content: ""; position: absolute; display: block; top: 0; bottom: 0; left: 0; width: 1px; background-color: rgba(0, 0, 0, 0.1); } .interface-meta-label { border-bottom: 1px solid rgba(0, 0, 0, 0.1); display: block; padding: 15px 30px; text-decoration: none; } .interface-meta-label.is-active { background: #f857a6; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #ff5858, #f857a6); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #ff5858, #f857a6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .interface-meta-label.is-active h3 { color: #fff } .interface-meta-label:not(.is-active):hover { color: #65bc7b; background-color: #65bc7b10 } .interface-meta-label h3 { font-size: 13px; margin: 0 } .interface-meta-content { flex-grow: 1 } .interface-meta-details.is-active { display: block } .interface-meta-info { padding: 0 22px; }