/ src / components / drafts.css
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  }