Like 0
Fork 0

Last active 1727320502

chlorine's Avatar chlorine revised this gist 1727320502. Go to revision

1 file changed, 233 insertions

whispe.css(file created)

@@ -0,0 +1,233 @@
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 + }
Newer Older

Powered by Opengist ⋅ Load: 17ms⋅

English