apps/blobs/static/app.css 2.5 K raw
1
/* blobs — app-specific styles.
2
 * Shared reset / tokens / components come from /assets/darkmatter.css.
3
 */
4
5
body {
6
  overflow-wrap: anywhere;
7
  word-break: break-word;
8
}
9
10
.admin-list-title,
11
.admin-list-meta,
12
.admin-list-info {
13
  min-width: 0;
14
  overflow-wrap: anywhere;
15
  word-break: break-word;
16
}
17
18
.admin-list-item {
19
  min-width: 0;
20
}
21
22
code {
23
  overflow-wrap: anywhere;
24
  word-break: break-all;
25
}
26
27
.crumbs {
28
  display: flex;
29
  flex-wrap: wrap;
30
  align-items: center;
31
  gap: 0.25rem;
32
  font-size: 12px;
33
  opacity: 0.7;
34
  margin-bottom: 1rem;
35
  overflow-wrap: anywhere;
36
  word-break: break-all;
37
}
38
39
.crumbs a {
40
  color: inherit;
41
  text-decoration: none;
42
}
43
44
.crumbs a:hover {
45
  opacity: 0.7;
46
}
47
48
.crumb-sep {
49
  opacity: 0.5;
50
}
51
52
.search-row {
53
  display: flex;
54
  align-items: center;
55
  gap: 0.75rem;
56
  margin-bottom: 1rem;
57
}
58
59
.search-row input[type="search"] {
60
  flex: 1;
61
  min-width: 0;
62
}
63
64
.filter-count {
65
  font-size: 12px;
66
  opacity: 0.5;
67
  white-space: nowrap;
68
}
69
70
.actions-row {
71
  display: flex;
72
  flex-wrap: wrap;
73
  gap: 1.5rem;
74
  margin-bottom: 1.25rem;
75
  padding-bottom: 1rem;
76
  border-bottom: 1px solid #333;
77
}
78
79
.inline-actions {
80
  display: flex;
81
  flex-direction: column;
82
  gap: 0.4rem;
83
  min-width: 240px;
84
}
85
86
.file-thumbnail {
87
  width: 48px;
88
  height: 48px;
89
  object-fit: cover;
90
  border: 1px solid #333;
91
}
92
93
.admin-list-item img.file-thumbnail {
94
  margin-right: 0.75rem;
95
}
96
97
.detail-preview {
98
  margin: 1rem 0;
99
  border: 1px solid #333;
100
  padding: 0.5rem;
101
  display: inline-block;
102
  max-width: 100%;
103
}
104
105
.detail-preview img {
106
  display: block;
107
  max-width: 100%;
108
  max-height: 60vh;
109
  height: auto;
110
}
111
112
.detail-meta {
113
  display: grid;
114
  grid-template-columns: max-content 1fr;
115
  gap: 0.4rem 1rem;
116
  margin: 1rem 0;
117
  font-size: 13px;
118
}
119
120
.detail-meta dt {
121
  opacity: 0.5;
122
  text-transform: lowercase;
123
}
124
125
.detail-meta dd {
126
  margin: 0;
127
  word-break: break-all;
128
}
129
130
.detail-meta code {
131
  font-size: 12px;
132
  background: #1e1c1f;
133
  padding: 1px 4px;
134
}
135
136
.detail-links,
137
.detail-actions {
138
  margin-top: 1.5rem;
139
  padding-top: 1rem;
140
  border-top: 1px solid #333;
141
}
142
143
.detail-links h3,
144
.detail-actions h3 {
145
  font-size: 14px;
146
  margin-bottom: 0.75rem;
147
  opacity: 0.7;
148
  text-transform: lowercase;
149
}
150
151
.link-row {
152
  display: flex;
153
  flex-wrap: wrap;
154
  align-items: center;
155
  gap: 0.75rem;
156
  margin-bottom: 0.5rem;
157
}
158
159
.link-row a {
160
  overflow-wrap: anywhere;
161
  word-break: break-all;
162
  min-width: 0;
163
  flex: 1 1 200px;
164
}
165
166
.detail-actions .form {
167
  margin-bottom: 1rem;
168
}
169
170
button.danger,
171
.link-button.danger {
172
  opacity: 0.8;
173
}