ligo.at
1@import url(/static/profile/default.css);
2
3:root {
4 --color-alert: #ee0000;
5 --color-background-secondary: #eee;
6 --color-border: #bbb;
7 --color-border-secondary: #ddd;
8 --color-success: #080;
9}
10
11@media (prefers-color-scheme: dark) {
12 :root {
13 --color-background-secondary: #333;
14 --color-border: #555;
15 --color-border-secondary: #333;
16 --color-success: #af2;
17 }
18}
19
20p {
21 text-wrap: pretty;
22}
23
24.wrapper {
25 max-width: 25em;
26}
27
28.wrapper.error p {
29 text-align: center;
30}
31
32h2 {
33 font-size: 1.3em;
34 font-weight: 500;
35}
36
37.link-item.static {
38 flex-grow: 1;
39 box-shadow: none;
40}
41
42.link-item.static:hover {
43 transform: none;
44}
45
46.alert {
47 color: var(--color-alert);
48}
49
50.caption {
51 font-size: 0.8em;
52}
53
54.faded {
55 color: var(--color-text-secondary);
56}
57
58button,
59input {
60 background: var(--color-background-secondary);
61 border: 1px solid var(--color-border);
62 border-radius: 2px;
63 box-sizing: border-box;
64 color: var(--color-text);
65 font: inherit;
66 font-size: 14px;
67 padding: 0.5em;
68 width: 100%;
69}
70
71button,
72input[type="submit"] {
73 font-weight: 600;
74 cursor: pointer;
75 padding: 0.25em;
76}
77
78button.submit:last-of-type,
79input[type="submit"]:last-of-type {
80 margin-top: 1em;
81}
82
83editor-label {
84 display: block;
85}
86
87editor-label + editor-label {
88 margin-top: 0.25em;
89}
90
91editor-label .label {
92 font-size: 14px;
93 font-weight: 700;
94 text-transform: uppercase;
95}
96
97link-editor-item {
98 display: block;
99 margin-top: 1em;
100 margin-left: -0.25em;
101 margin-right: -0.25em;
102 padding: 0.25em;
103 background: var(--color-background);
104 border: 1px solid var(--color-border-secondary);
105 border-radius: 2px;
106}
107
108link-editor-header {
109 display: flex;
110 flex-direction: row;
111 gap: 0.25em;
112}
113
114link-editor-drag-handle {
115 background: var(--color-background-secondary);
116 display: flex;
117 flex-grow: 0;
118 padding: 2px;
119 line-height: 100%;
120 font-size: 1.5em;
121 align-items: center;
122 cursor: grab;
123}
124
125link-editor-drag-handle:active {
126 cursor: grabbing;
127}
128
129link-editor-buttons {
130 display: flex;
131 flex-direction: row;
132 gap: 0.25em;
133 margin-top: 0.25em;
134}
135
136still-building {
137 background-color: var(--color-background-secondary);
138 border-radius: 2px;
139 display: block;
140}
141
142still-building .title {
143 background: repeating-linear-gradient(
144 45deg,
145 #fc0,
146 #fc0 20px,
147 #333 20px,
148 #333 40px
149 );
150 border-radius: 2px 2px 0 0;
151 color: #fff;
152 display: block;
153 font-size: 1.2em;
154 font-weight: 900;
155 padding: 0.25em;
156 text-align: center;
157 text-transform: uppercase;
158 text-shadow:
159 -1px -1px 0.5px #000,
160 1px -1px 0.5px #000,
161 -1px 1px 0.5px #000,
162 1px 1px 0.5px #000;
163}
164
165still-building p {
166 margin: 0;
167 padding: 0.5em;
168
169 &:not(:first-of-type) {
170 padding-top: 0;
171 }
172}
173
174.htmx-indicator {
175 --height: 2px;
176 height: var(--height);
177 margin: 2px 0;
178 opacity: 0;
179 visibility: none;
180}
181
182.htmx-request .progress {
183 animation: progress-bar 0.5s linear;
184 animation-fill-mode: both;
185 background: var(--color-success);
186 border-radius: calc(var(--height) / 2);
187 display: block;
188 height: var(--height);
189}
190
191@keyframes progress-bar {
192 0% {
193 width: 25%;
194 }
195 100% {
196 width: 100%;
197 }
198}
199
200form[hx-post] {
201 transition: opacity 0.2s;
202}
203
204form[hx-post].htmx-request {
205 opacity: 0.6;
206}