nekomimi.pet
forked from
microcosm.blue/microcosm-rs
Constellation, Spacedust, Slingshot, UFOs: atproto crates and services for microcosm
1body {
2 color: #434;
3 font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
4 margin: 0;
5 min-height: 100vh;
6 padding: 0;
7}
8.wrap {
9 border: 2px solid #221828;
10 border-radius: 0.5rem;
11 box-sizing: border-box;
12 overflow: hidden;
13 display: flex;
14 flex-direction: column;
15 min-height: 100vh;
16}
17.wrap.unframed {
18 border-radius: 0;
19 border-width: 0.4rem;
20}
21header {
22 background: #221828;
23 display: flex;
24 justify-content: space-between;
25 padding: 0 0.25rem;
26 color: #c9b;
27 display: flex;
28 gap: 0.5rem;
29 align-items: baseline;
30}
31header > * {
32 flex-basis: 33%;
33}
34header > .empty {
35 font-size: 0.8rem;
36 opacity: 0.5;
37}
38header > .title {
39 text-align: center;
40}
41header > a.micro {
42 text-decoration: none;
43 font-size: 0.8rem;
44 text-align: right;
45 opacity: 0.5;
46}
47header > a.micro:hover {
48 opacity: 1;
49}
50main {
51 background: #ccc;
52 display: flex;
53 flex-direction: column;
54 flex-grow: 1;
55 padding: 0.25rem 0.5rem;
56}
57.mini-content {
58 margin: 1rem auto 0;
59 padding: 1rem 0.5rem;
60 max-width: 21rem;
61}
62
63.explain {
64 border-bottom: 1px dashed #888;
65 margin-bottom: 1rem;
66 padding-bottom: 2rem;
67}
68.explain p {
69 text-align: left;
70}
71
72#error-message {
73 font-size: 0.8rem;
74 color: #a31;
75}
76
77#error-message:not(.hidden) + #prompt {
78 display: none !important;
79}
80
81#error-message,
82p {
83 margin: 1rem 0 0;
84 text-align: center;
85}
86p.detail {
87 font-size: 0.8rem;
88}
89p.detail.no {
90 font-style: italic;
91}
92.parent-host {
93 font-weight: bold;
94 color: #48c;
95 display: inline-block;
96 padding: 0 0.125rem;
97 border-radius: 0.25rem;
98 border: 1px solid #aaa;
99 font-size: 0.8rem;
100}
101
102#loader {
103 display: flex;
104 flex-grow: 1;
105 justify-content: center;
106 align-items: center;
107}
108.spinner {
109 animation: rotation 1.618s ease-in-out infinite;
110 border-radius: 50%;
111 border: 3px dashed #434;
112 box-sizing: border-box;
113 display: inline-block;
114 height: 1.5em;
115 width: 1.5em;
116}
117@keyframes rotation {
118 0% { transform: rotate(0deg) }
119 100% { transform: rotate(360deg) }
120}
121/* loader visibility is mutually exclusive with its immediate sibling */
122#loader:not(.hidden) + * {
123 display: none !important;
124}
125
126#user-info {
127 flex-grow: 1;
128 display: flex;
129 flex-direction: column;
130 justify-content: center;
131}
132.action {
133 background: #eee;
134 display: flex;
135 justify-content: space-between;
136 padding: 0.5rem 0.25rem 0.5rem 0.5rem;
137 font-size: 0.8rem;
138 align-items: baseline;
139 border-radius: 0.5rem;
140 border: 1px solid #bbb;
141 cursor: pointer;
142}
143.action:hover {
144 background: #fff;
145}
146#form-action:not(.hidden) + .action {
147 display: none !important;
148}
149
150#connect,
151#allow,
152#revoke {
153 background: transparent;
154 border: none;
155 border-left: 1px solid #bbb;
156 padding: 0 0.5rem;
157 color: #375;
158 font: inherit;
159 cursor: pointer;
160}
161#revoke {
162 color: #a31;
163}
164#action:hover #allow {
165 color: #285;
166}
167
168#need-storage {
169 font-size: 0.8rem;
170}
171.problem {
172 color: #a31;
173}
174
175#or {
176 font-size: 0.8rem;
177 text-align: center;
178}
179#or p {
180 margin: 0 0 1rem;
181}
182
183input.handle {
184 border: none;
185 border-bottom: 1px dashed #aaa;
186 background: transparent;
187}
188
189.hidden {
190 display: none !important;
191}
192
193.hello-connect-plz {
194 margin: 1.667rem 0 0.667rem;
195}