Нравится 0
Создать форк 0

Последняя активность 1727320502

whispe.css Исходник
1:root {
2 --primary-color: #657786;
3 --bg-color: #1387cf;
4 --hover-bg-color: #1991db;
5 --border-color: #888888;
6 --spinner-color: #1da1f2;
7 --padding-small: 12px;
8 --padding-medium: 16px;
9 --margin-small: 10px;
10 --margin-medium: 16px;
11}
12
13.toots-container {
14 width: 100%;
15 max-width: 100%;
16 margin: 0 auto;
17 padding: 0 var(--padding-small);
18}
19
20.toot {
21 background-color: transparent;
22 border: 0.5px solid var(--border-color);
23 border-radius: 12px;
24 padding: var(--padding-medium);
25 margin-bottom: var(--margin-medium);
26 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
27}
28
29.toot-info {
30 display: flex;
31 align-items: center;
32 margin-bottom: var(--padding-small);
33}
34
35.toot-avatar img {
36 width: 48px;
37 height: 48px;
38 border-radius: 50%;
39 margin-right: var(--padding-small);
40}
41
42.toot-profile strong {
43 font-size: 15px;
44 display: inline-block;
45}
46
47.toot-profile a,
48.toot-profile small {
49 font-size: 14px;
50 color: var(--primary-color);
51 text-decoration: none;
52 display: inline-block;
53}
54
55.toot-profile small {
56 display: block;
57 margin-top: 2px;
58}
59
60.toot-content {
61 font-size: 16px;
62 line-height: 1.4;
63 margin-bottom: var(--padding-small);
64}
65
66.toot-content img {
67 max-width: 100%;
68 border-radius: 12px;
69 margin-top: var(--padding-small);
70}
71
72.toot-media {
73 display: grid;
74 gap: 2px;
75 margin-top: var(--margin-small);
76}
77
78.toot-media img, .toot-media video {
79 width: 100%;
80 height: auto; /* 改为自动高度以保持比例 */
81 max-height: 400px; /* 设置一个最大高度 */
82 object-fit: cover;
83 border-radius: 8px;
84 display: block;
85}
86
87.toot-media.single {
88 grid-template-columns: 1fr;
89}
90
91.toot-media.double,
92.toot-media.triple,
93.toot-media.quad,
94.toot-media.multi {
95 grid-template-columns: repeat(2, 1fr); /* 默认两列 */
96}
97
98/* 三张图片时，第一张横跨两列 */
99.toot-media.triple img:first-child {
100 grid-column: span 2;
101 height: 400px; /* 可以设置特定的高度 */
102}
103
104/* 五张或更多图片时，第三行开始三列 */
105.toot-media.multi img:nth-child(n+5) {
106 grid-column: span 1;
107}
108
109.toot-media.single {
110 grid-template-columns: 1fr;
111}
112
113.toot-media.double,
114.toot-media.triple,
115.toot-media.quad,
116.toot-media.multi {
117 grid-template-columns: 1fr 1fr;
118}
119
120.toot-media.triple img:first-child {
121 grid-row: span 2;
122}
123
124.toot-stats {
125 display: flex;
126 justify-content: space-between;
127 color: var(--primary-color);
128 font-size: 14px;
129}
130
131.toot-stats span {
132 display: flex;
133 align-items: center;
134}
135
136.toot-stats i {
137 margin-right: 5px;
138}
139
140.mdi--reply,
141.mdi--star,
142.mdi--twitter-retweet {
143 display: inline-block;
144 width: 18px;
145 height: 18px;
146 background-color: currentColor;
147 -webkit-mask-repeat: no-repeat;
148 mask-repeat: no-repeat;
149 -webkit-mask-size: 100% 100%;
150 mask-size: 100%;
151}
152
153.mdi--reply {
154 --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 9V5l-7 7l7 7v-4.1c5 0 8.5 1.6 11 5.1c-1-5-4-10-11-11'/%3E%3C/svg%3E");
155}
156
157.mdi--star {
158 --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2L9.19 8.62L2 9.24l5.45 4.73L5.82 21z'/%3E%3C/svg%3E");
159}
160
161.mdi--twitter-retweet {
162 --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 5.75L10.25 10H7v6h6.5l2 2H7a2 2 0 0 1-2-2v-6H1.75zm12 12.5L13.75 14H17V8h-6.5l-2-2H17a2 2 0 0 1 2 2v6h3.25z'/%3E%3C/svg%3E");
163 -webkit-mask-image: var(--svg);
164 mask-image: var(--svg);
165}
166
167.mdi--reply,
168.mdi--star,
169.mdi--twitter-retweet {
170 -webkit-mask-image: var(--svg);
171 mask-image: var(--svg);
172}
173
174.spinner {
175 border: 3px solid rgba(0, 0, 0, 0.1);
176 border-radius: 50%;
177 border-top: 3px solid var(--spinner-color);
178 width: 30px;
179 height: 30px;
180 animation: spin 1s linear infinite;
181 margin: 20px auto;
182}
183
184@keyframes spin {
185 0% {
186 transform: rotate(0deg);
187 }
188
189 100% {
190 transform: rotate(360deg);
191 }
192}
193
194.loading-container {
195 text-align: center;
196 padding: 20px;
197}
198
199#toots-moreButton {
200 background-color: var(--bg-color);
201 color: white;
202 border: none;
203 padding: 10px 20px;
204 border-radius: 15px;
205 font-size: 14px;
206 font-weight: bold;
207 cursor: pointer;
208 transition: background-color 0.3s;
209}
210
211#toots-moreButton:hover {
212 background-color: var(--hover-bg-color);
213}
214
215@media (max-width: 600px) {
216 .toots-container {
217 padding: var(--padding-small);
218 }
219
220 .toot {
221 padding: var(--padding-small);
222 }
223
224 .toot-content {
225 font-size: 15px;
226 }
227}
228
229@media (max-width: 500px) {
230 .toot-media.single img {
231 max-height: 300px;
232 }
233}

Работает на Opengist ⋅ Load: 34ms⋅

Русский