margin.at
1.feed {
2 display: flex;
3 flex-direction: column;
4 gap: 16px;
5}
6
7.feed-header {
8 display: flex;
9 align-items: center;
10 justify-content: space-between;
11 margin-bottom: 8px;
12}
13
14.feed-title {
15 font-size: 1.5rem;
16 font-weight: 700;
17}
18
19.feed-filters {
20 display: flex;
21 gap: 8px;
22 margin-bottom: 24px;
23 padding: 4px;
24 background: var(--bg-tertiary);
25 border-radius: var(--radius-lg);
26 width: fit-content;
27}
28
29.filter-tab {
30 padding: 8px 16px;
31 font-size: 0.9rem;
32 font-weight: 500;
33 color: var(--text-secondary);
34 background: transparent;
35 border: none;
36 border-radius: var(--radius-md);
37 cursor: pointer;
38 transition: all 0.15s ease;
39}
40
41.filter-tab:hover {
42 color: var(--text-primary);
43 background: var(--bg-hover);
44}
45
46.filter-tab.active {
47 color: var(--text-primary);
48 background: var(--bg-card);
49 box-shadow: var(--shadow-sm);
50}
51
52.page-header {
53 margin-bottom: 32px;
54}
55
56.page-title {
57 font-size: 2rem;
58 font-weight: 700;
59 margin-bottom: 8px;
60}
61
62.page-description {
63 color: var(--text-secondary);
64 font-size: 1.1rem;
65}
66
67.url-input-wrapper {
68 margin-bottom: 24px;
69}
70
71.url-input-container {
72 display: flex;
73 gap: 12px;
74}
75
76.url-input {
77 width: 100%;
78 padding: 16px;
79 background: var(--bg-secondary);
80 border: 1px solid var(--border);
81 border-radius: var(--radius-md);
82 color: var(--text-primary);
83 font-size: 1.1rem;
84 transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
85 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
86}
87
88.url-input:focus {
89 outline: none;
90 border-color: var(--accent);
91 box-shadow: 0 0 0 4px var(--accent-subtle);
92 background: var(--bg-primary);
93}
94
95.url-input::placeholder {
96 color: var(--text-tertiary);
97}
98
99.url-results-header {
100 display: flex;
101 align-items: center;
102 justify-content: space-between;
103 margin-bottom: 16px;
104 flex-wrap: wrap;
105 gap: 12px;
106}
107
108.back-link {
109 display: inline-flex;
110 align-items: center;
111 gap: 8px;
112 color: var(--text-secondary);
113 font-size: 0.9rem;
114 text-decoration: none;
115 margin-bottom: 24px;
116 transition: color 0.15s;
117}
118
119.back-link:hover {
120 color: var(--accent);
121}
122
123.new-page {
124 max-width: 600px;
125 margin: 0 auto;
126 display: flex;
127 flex-direction: column;
128 gap: 32px;
129}
130
131@media (max-width: 640px) {
132 .main-content {
133 padding: 16px 12px;
134 }
135
136 .page-title {
137 font-size: 1.5rem;
138 }
139}