friendship ended with social-app. php is my new best friend
veryroundbird.house
1* {
2 box-sizing: border-box;
3}
4
5body {
6 font-family: monospace;
7 font-size: 14px;
8 margin: 0;
9 color: var(--text-color);
10 background-color: var(--background-color);
11}
12
13a {
14 color: var(--link-color);
15}
16
17h2 {
18 font-size: 1em;
19 text-align: center;
20 margin: 0;
21 text-transform: lowercase;
22}
23
24label {
25 display: block;
26 font-weight: bold;
27}
28
29.help {
30 font-size: .8em;
31 margin: 0;
32 font-style: italic;
33}
34
35.align-right {
36 text-align: right;
37}
38
39.form-input {
40 margin: 0 0 1em;
41
42 &.btn-row {
43 text-align: center;
44 }
45}
46
47.horizontal-radio {
48 display: flex;
49 gap: 10px;
50}
51
52input[type="text"],
53input[type="number"],
54input[type="tel"],
55input[type="email"],
56textarea {
57 border: 1px var(--border-color) solid;
58 padding: 5px;
59 background-color: color-mix(in srgb-linear, var(--background-color), var(--blend-color) 50%);
60 width: 100%;
61 font-family: inherit;
62 color: inherit;
63}
64
65.btn {
66 appearance: none;
67 padding: 5px 10px;
68 min-width: 200px;
69 border-radius: 1px;
70 border: none;
71 font-weight: bold;
72 font-family: inherit;
73 cursor: pointer;
74}
75
76.btn-primary {
77 background-color: var(--btn-primary-bg);
78 color: var(--btn-primary-color);
79}
80
81.btn-invis {
82 appearance: none;
83 border: 0;
84 padding: 0;
85 background-color: transparent;
86 color: inherit;
87 font-family: inherit;
88 font-size: inherit;
89 cursor: pointer;
90}
91
92@keyframes spin {
93 0% {
94 transform: rotate(0deg);
95 }
96
97 100% {
98 transform: rotate(360deg);
99 }
100}
101
102#spinner-container {
103 text-align: center;
104 padding: 10px;
105}
106
107#spinner {
108 background-image: url('@images/spinner.svg');
109 width: 48px;
110 height: 48px;
111 background-size: contain;
112 background-repeat: no-repeat;
113 position: relative;
114 display: block;
115 animation: spin 1s infinite linear;
116 margin: 0 auto;
117
118 path {
119 fill: var(--text-color);
120 }
121
122 &:after {
123 content: "";
124 position: absolute;
125 top: 0;
126 left: 0;
127 width: 100%;
128 height: 100%;
129 background-color: var(--text-color);
130 mix-blend-mode: screen;
131 }
132}
133
134#post {
135 min-width: 280px;
136 max-width: 500px;
137 width: 100%;
138 padding: 20px;
139
140 button[type="submit"] {
141 min-width: 0;
142 }
143}
144
145#attachment-images-field,
146#attachment-media-field,
147#attachment-link-field {
148 display: none;
149}
150
151button[data-action="openpost"] {
152 position: fixed;
153 top: 20px;
154 left: 880px;
155 transform: translateX(-100%);
156 min-width: 0;
157 opacity: .7;
158
159 &:hover {
160 opacity: 1;
161 }
162}
163
164[popover] {
165 max-height: calc(100% - 40px);
166 max-width: calc(100% - 40px);
167 min-width: 280px;
168 display: none;
169 grid-template-rows: 1fr auto;
170 border: 1px var(--border-color) solid;
171 background-color: var(--background-color);
172
173 &:popover-open {
174 display: grid;
175 }
176
177 img {
178 object-fit: contain;
179 }
180
181 .alt {
182 padding: 10px;
183 }
184}
185
186@keyframes fadeOut {
187 0% {
188 opacity: 100%;
189 }
190
191 100% {
192 opacity: 0;
193 }
194}
195
196.copy-tooltip {
197 position: absolute;
198 z-index: 99;
199 padding: 3px;
200 text-transform: lowercase;
201 background-color: var(--btn-primary-bg);
202 color: var(--text-color);
203 animation: fadeOut 1s;
204 animation-delay: 2s;
205}