drafts.css
1 .drafts-list { 2 margin: 1em 0; 3 padding: 0; 4 list-style: none; 5 } 6 .drafts-list > li { 7 margin: 8px 0 16px; 8 padding: 0; 9 } 10 11 .mini-draft-meta { 12 font-size: 80%; 13 justify-content: space-between; 14 align-items: center; 15 display: flex; 16 padding: 8px 0; 17 } 18 .mini-draft-meta * { 19 vertical-align: middle; 20 } 21 22 button.draft-item { 23 display: block; 24 width: 100%; 25 border: 0; 26 border-radius: 8px; 27 background-color: var(--bg-color); 28 color: var(--text-color); 29 border: 1px solid var(--link-faded-color); 30 text-align: left; 31 padding: 0; 32 } 33 button.draft-item:is(:hover, :focus) { 34 border-color: var(--link-color); 35 box-shadow: 0 0 0 3px var(--link-faded-color); 36 filter: none !important; 37 } 38 39 .mini-draft { 40 display: flex; 41 gap: 0 8px; 42 font-size: 90%; 43 padding: 8px; 44 } 45 46 .mini-draft-aside { 47 width: 64px; 48 aspect-ratio: 1 / 1; 49 display: flex; 50 align-items: center; 51 justify-content: center; 52 background-color: var(--bg-faded-color); 53 border-radius: 4px; 54 flex-shrink: 0; 55 border: 1px solid var(--outline-color); 56 } 57 .mini-draft-aside.has-image { 58 background-image: var(--bg-image); 59 background-size: cover; 60 background-position: center; 61 background-repeat: no-repeat; 62 } 63 .mini-draft-aside.has-image > span { 64 background-color: var(--bg-faded-blur-color); 65 backdrop-filter: blur(8px); 66 padding: 4px 8px; 67 border-radius: 32px; 68 } 69 .mini-draft-aside.has-image > span * { 70 vertical-align: middle; 71 } 72 73 .mini-draft-main { 74 flex-grow: 1; 75 } 76 77 .mini-draft-spoiler, 78 .mini-draft-status { 79 text-overflow: ellipsis; 80 overflow: hidden; 81 display: -webkit-box; 82 display: box; 83 -webkit-box-orient: vertical; 84 box-orient: vertical; 85 -webkit-line-clamp: 2; 86 line-clamp: 2; 87 line-height: 1.1; 88 } 89 .mini-draft-spoiler + .mini-draft-status { 90 border-top: 1px dashed var(--text-insignificant-color); 91 padding-top: 4px; 92 margin-top: 4px; 93 color: var(--text-insignificant-color); 94 }