styles.css at main · vicwalker.dev.br/pdslista

A community-maintained directory of Bluesky Personal Data Servers (PDS).
pdslista / styles.css
at main 2.7 kB view raw
  1* {
  2  margin: 0;
  3  padding: 0;
  4  box-sizing: border-box;
  5}
  6
  7body {
  8  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  9  background-color: #f5f5f5;
 10  color: #333;
 11  line-height: 1.6;
 12}
 13
 14.container {
 15  max-width: 1200px;
 16  margin: 0 auto;
 17  padding: 20px;
 18}
 19
 20header {
 21  background-color: white;
 22  padding: 30px 0;
 23  margin-bottom: 30px;
 24  border-bottom: 2px solid #e0e0e0;
 25}
 26
 27h1 {
 28  font-size: 32px;
 29  margin-bottom: 10px;
 30}
 31
 32.subtitle {
 33  color: #666;
 34  font-size: 16px;
 35  margin-bottom: 20px;
 36}
 37
 38.header-links {
 39  display: flex;
 40  gap: 15px;
 41}
 42
 43.header-link {
 44  color: #0066cc;
 45  text-decoration: none;
 46  font-size: 14px;
 47}
 48
 49.header-link:hover {
 50  text-decoration: underline;
 51}
 52
 53.loading {
 54  text-align: center;
 55  padding: 40px;
 56}
 57
 58.spinner {
 59  border: 4px solid #e0e0e0;
 60  border-top: 4px solid #0066cc;
 61  border-radius: 50%;
 62  width: 40px;
 63  height: 40px;
 64  animation: spin 1s linear infinite;
 65  margin: 0 auto 20px;
 66}
 67
 68@keyframes spin {
 69  0% { transform: rotate(0deg); }
 70  100% { transform: rotate(360deg); }
 71}
 72
 73.content {
 74  background-color: white;
 75  padding: 20px;
 76  border-radius: 4px;
 77}
 78
 79.content.hidden,
 80.no-data.hidden,
 81#loading.hidden {
 82  display: none;
 83}
 84
 85.stats {
 86  margin-bottom: 20px;
 87  padding-bottom: 20px;
 88  border-bottom: 1px solid #e0e0e0;
 89}
 90
 91.stat-item {
 92  font-size: 16px;
 93}
 94
 95.stat-item strong {
 96  font-weight: 600;
 97}
 98
 99.pds-table {
100  width: 100%;
101  border-collapse: collapse;
102  margin-top: 20px;
103}
104
105.pds-table thead {
106  background-color: #f9f9f9;
107  border-bottom: 2px solid #e0e0e0;
108}
109
110.pds-table th {
111  text-align: left;
112  padding: 15px;
113  font-weight: 600;
114  font-size: 14px;
115  text-transform: uppercase;
116  color: #666;
117}
118
119.pds-table td {
120  padding: 12px 15px;
121  border-bottom: 1px solid #e0e0e0;
122  font-size: 14px;
123  vertical-align: top;
124}
125
126.pds-table tbody tr:hover {
127  background-color: #f9f9f9;
128}
129
130.pds-table a {
131  color: #0066cc;
132  text-decoration: none;
133  word-break: break-all;
134}
135
136.pds-table a:hover {
137  text-decoration: underline;
138}
139
140.handles-container {
141  display: flex;
142  flex-wrap: wrap;
143  gap: 6px;
144}
145
146.handle-tag {
147  background-color: #e8f0ff;
148  color: #0066cc;
149  padding: 4px 8px;
150  border-radius: 3px;
151  font-size: 12px;
152  white-space: nowrap;
153  border: 1px solid #cce0ff;
154}
155
156.link-button {
157  display: inline-block;
158  background-color: #0066cc;
159  color: white;
160  padding: 6px 12px;
161  border-radius: 3px;
162  font-size: 12px;
163  text-decoration: none;
164  transition: background-color 0.2s;
165}
166
167.link-button:hover {
168  background-color: #0052a3;
169  text-decoration: none;
170}
171
172.no-data {
173  text-align: center;
174  padding: 40px;
175  color: #999;
176}
177
178.hidden {
179  display: none;
180}