Skip to content

Commit c5067f3

Browse files
alshakeroalshakero
committed
Add On This Day Widget
1 parent 1701705 commit c5067f3

5 files changed

Lines changed: 761 additions & 0 deletions

File tree

‎src/wp-admin/css/on-this-day.css‎

Lines changed: 345 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,345 @@
1+
/* On This Day dashboard widget
2+
========================================================================== */
3+
4+
#dashboard_on_this_day .inside {
5+
margin: 0;
6+
padding: 0;
7+
max-height: 560px;
8+
overflow: auto;
9+
}
10+
11+
#dashboard_on_this_day .hndle {
12+
gap: 0;
13+
}
14+
15+
.on-this-day-title-main {
16+
display: inline-flex;
17+
align-items: center;
18+
gap: 6px;
19+
}
20+
21+
.on-this-day-title-main::before {
22+
content: "";
23+
display: inline-block;
24+
width: 16px;
25+
height: 16px;
26+
background-color: currentColor;
27+
opacity: 0.85;
28+
-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='3'/><path d='M16 2v4M8 2v4M3 10h18'/><circle cx='12' cy='15' r='1.5' fill='black' stroke='none'/></svg>") center/contain no-repeat;
29+
mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='3'/><path d='M16 2v4M8 2v4M3 10h18'/><circle cx='12' cy='15' r='1.5' fill='black' stroke='none'/></svg>") center/contain no-repeat;
30+
}
31+
32+
.on-this-day-title-date {
33+
display: inline-block;
34+
margin-left: 10px;
35+
padding: 2px 9px;
36+
font-weight: 600;
37+
font-size: 11px;
38+
letter-spacing: 0.3px;
39+
text-transform: uppercase;
40+
color: #135e96;
41+
background: #e7f1fb;
42+
border-radius: 999px;
43+
vertical-align: 1px;
44+
}
45+
46+
.on-this-day-widget {
47+
font-size: 13px;
48+
color: #1d2327;
49+
}
50+
51+
.on-this-day-intro {
52+
margin: 0;
53+
padding: 14px 16px 12px;
54+
color: #50575e;
55+
background: linear-gradient(180deg, #f6f7ff 0%, #ffffff 100%);
56+
border-bottom: 1px solid #f0f0f1;
57+
}
58+
59+
.on-this-day-intro strong {
60+
color: #1d2327;
61+
}
62+
63+
.on-this-day-timeline {
64+
margin: 0;
65+
padding: 6px 16px 16px;
66+
position: relative;
67+
list-style: none;
68+
}
69+
70+
.on-this-day-timeline::before {
71+
content: "";
72+
position: absolute;
73+
left: 38px;
74+
top: 16px;
75+
bottom: 8px;
76+
width: 2px;
77+
background: linear-gradient(180deg, #c3c4c7 0%, #dcdcde 60%, transparent 100%);
78+
border-radius: 2px;
79+
}
80+
81+
.on-this-day-year-group {
82+
position: relative;
83+
margin: 14px 0 0;
84+
padding-left: 64px;
85+
list-style: none;
86+
}
87+
88+
.on-this-day-year-group:first-child {
89+
margin-top: 8px;
90+
}
91+
92+
.on-this-day-year-badge {
93+
position: absolute;
94+
left: 0;
95+
top: 0;
96+
width: 54px;
97+
height: 44px;
98+
display: flex;
99+
flex-direction: column;
100+
align-items: center;
101+
justify-content: center;
102+
padding: 0;
103+
background: #fff;
104+
border: 1px solid #dcdcde;
105+
border-radius: 10px;
106+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
107+
z-index: 1;
108+
box-sizing: border-box;
109+
}
110+
111+
.on-this-day-year-group:first-child .on-this-day-year-badge {
112+
background: linear-gradient(135deg, #2271b1 0%, #135e96 100%);
113+
border-color: transparent;
114+
color: #fff;
115+
box-shadow: 0 2px 6px rgba(34, 113, 177, 0.35);
116+
}
117+
118+
.on-this-day-year-group:first-child .on-this-day-year-ago {
119+
color: rgba(255, 255, 255, 0.85);
120+
}
121+
122+
.on-this-day-year-number {
123+
font-weight: 700;
124+
font-size: 14px;
125+
letter-spacing: 0.2px;
126+
line-height: 1.15;
127+
}
128+
129+
.on-this-day-year-ago {
130+
margin-top: 1px;
131+
font-size: 10px;
132+
text-transform: uppercase;
133+
letter-spacing: 0.5px;
134+
color: #646970;
135+
font-weight: 500;
136+
white-space: nowrap;
137+
}
138+
139+
.on-this-day-post-list {
140+
margin: 0;
141+
padding: 0;
142+
list-style: none;
143+
display: flex;
144+
flex-direction: column;
145+
gap: 8px;
146+
}
147+
148+
.on-this-day-post {
149+
display: flex;
150+
gap: 12px;
151+
padding: 10px 12px;
152+
background: #fff;
153+
border: 1px solid #f0f0f1;
154+
border-radius: 8px;
155+
transition: border-color .15s ease, box-shadow .15s ease;
156+
}
157+
158+
.on-this-day-post:hover {
159+
border-color: #c3c4c7;
160+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
161+
}
162+
163+
.on-this-day-post-thumbnail {
164+
flex: 0 0 52px;
165+
width: 52px;
166+
height: 52px;
167+
border-radius: 6px;
168+
overflow: hidden;
169+
background: #f0f0f1;
170+
display: block;
171+
}
172+
173+
.on-this-day-post-thumbnail img {
174+
width: 100%;
175+
height: 100%;
176+
object-fit: cover;
177+
display: block;
178+
}
179+
180+
.on-this-day-post-body {
181+
flex: 1 1 auto;
182+
min-width: 0;
183+
}
184+
185+
.on-this-day-post-title {
186+
margin: 0 0 3px;
187+
font-size: 13px;
188+
font-weight: 600;
189+
line-height: 1.35;
190+
}
191+
192+
.on-this-day-post-title a {
193+
color: #1d2327;
194+
text-decoration: none;
195+
box-shadow: none;
196+
}
197+
198+
.on-this-day-post-title a:hover,
199+
.on-this-day-post-title a:focus {
200+
color: #2271b1;
201+
}
202+
203+
.on-this-day-chip {
204+
display: inline-block;
205+
margin-left: 4px;
206+
padding: 1px 7px;
207+
font-size: 10px;
208+
font-weight: 600;
209+
letter-spacing: 0.3px;
210+
text-transform: uppercase;
211+
border-radius: 999px;
212+
vertical-align: 2px;
213+
white-space: nowrap;
214+
}
215+
216+
.on-this-day-chip-private {
217+
background: #fcf0f1;
218+
color: #b32d2e;
219+
border: 1px solid #f5c9cc;
220+
}
221+
222+
.on-this-day-post-excerpt {
223+
margin: 0 0 6px;
224+
color: #50575e;
225+
line-height: 1.5;
226+
display: -webkit-box;
227+
-webkit-line-clamp: 2;
228+
-webkit-box-orient: vertical;
229+
overflow: hidden;
230+
}
231+
232+
.on-this-day-post-meta {
233+
display: flex;
234+
align-items: center;
235+
gap: 10px;
236+
flex-wrap: wrap;
237+
color: #646970;
238+
font-size: 12px;
239+
}
240+
241+
.on-this-day-post-time {
242+
display: inline-flex;
243+
align-items: center;
244+
gap: 4px;
245+
color: #646970;
246+
}
247+
248+
.on-this-day-post-time svg {
249+
vertical-align: middle;
250+
opacity: 0.85;
251+
}
252+
253+
.on-this-day-post-categories {
254+
padding: 1px 8px;
255+
background: #f6f7f7;
256+
border-radius: 999px;
257+
color: #50575e;
258+
font-size: 11px;
259+
max-width: 200px;
260+
white-space: nowrap;
261+
overflow: hidden;
262+
text-overflow: ellipsis;
263+
}
264+
265+
.on-this-day-post-actions {
266+
margin-left: auto;
267+
display: inline-flex;
268+
gap: 10px;
269+
}
270+
271+
.on-this-day-post-action {
272+
color: #2271b1;
273+
text-decoration: none;
274+
font-weight: 500;
275+
}
276+
277+
.on-this-day-post-action:hover,
278+
.on-this-day-post-action:focus {
279+
color: #135e96;
280+
text-decoration: underline;
281+
}
282+
283+
/* Empty state */
284+
.on-this-day-empty {
285+
text-align: center;
286+
padding: 26px 20px 22px;
287+
}
288+
289+
.on-this-day-empty-icon {
290+
display: inline-flex;
291+
align-items: center;
292+
justify-content: center;
293+
width: 64px;
294+
height: 64px;
295+
border-radius: 50%;
296+
color: #2271b1;
297+
background: radial-gradient(circle at 30% 30%, #e7f1fb 0%, #f6f7ff 60%, #ffffff 100%);
298+
box-shadow: inset 0 0 0 1px #e0eaf5;
299+
margin-bottom: 10px;
300+
}
301+
302+
.on-this-day-empty-title {
303+
margin: 6px 0 4px;
304+
font-size: 15px;
305+
font-weight: 600;
306+
color: #1d2327;
307+
}
308+
309+
.on-this-day-empty-text {
310+
max-width: 340px;
311+
margin: 0 auto 12px;
312+
color: #50575e;
313+
line-height: 1.55;
314+
}
315+
316+
.on-this-day-empty-cta {
317+
margin: 0;
318+
}
319+
320+
@media (prefers-reduced-motion: reduce) {
321+
.on-this-day-post {
322+
transition: none;
323+
}
324+
}
325+
326+
@media screen and (max-width: 600px) {
327+
.on-this-day-timeline {
328+
padding-left: 12px;
329+
padding-right: 12px;
330+
}
331+
332+
.on-this-day-timeline::before {
333+
left: 34px;
334+
}
335+
336+
.on-this-day-year-group {
337+
padding-left: 58px;
338+
}
339+
340+
.on-this-day-post-thumbnail {
341+
flex-basis: 44px;
342+
width: 44px;
343+
height: 44px;
344+
}
345+
}

0 commit comments

Comments
 (0)