.mark-editor { [type=checkbox], [type=radio] { margin-inline-end: .1em; } } #mark_date { width: unset !important; } .mark-line { margin-bottom: var(--pico-spacing); >div:last-child { margin-top: calc(-0.3rem * var(--pico-line-height)); text-align: center; } } // make log list like a timeline list // source: https://dev.to/peterc/how-to-create-joined-bulletpoint-lists-with-css-bbc-news-style-1eem #log-list ul { li { list-style: none; padding-bottom: 1rem; border-left: 1px solid var(--pico-range-active-border-color); position: relative; padding-left: 0.75em; margin-left: 1em; margin-bottom: 0; // The actual line being placed before each list item, tweak width and color as appropriate &:before { content: ""; width: 0.5em; height: 0.5em; border: 1px solid var(--pico-range-active-border-color); background: var(--pico-background-color); border-radius: 50%; position: absolute; left: -0.275em; top: 0.5em; } &:last-child { padding-bottom: 0; } } } @media (max-width: 768px) { .mark-line { >div, >div:last-child { margin-top: unset; } } } .tag-input { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; border-bottom: 0.1rem solid #ccc; padding-bottom: 2px; } .tag-input__tag { position: relative; display: block; float: left; color: white; background: #d5d5d5; padding: 5px 20px 5px 6px; margin: 4px; border-radius: .4rem; line-height: 1em; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; height: min-content; } .tag-input__tag.tag-input__tag--highlight { color: white; background: #00a1cc; } .tag-input__close { position: absolute; top: 0; right: 0; width: 14px; height: 100%; cursor: pointer; border-radius: 0 2px 2px 0; -webkit-transition: background 0.2s; transition: background 0.2s; } .tag-input__close:after { position: absolute; content: "×"; top: 5px; left: 2px; } .tag-input__close:hover { color: #606c76; } .tag-input input { border: 0; margin: 4px; padding: 3px 7px 3px 0; width: auto; outline: none; height: unset; }