alice.mosphere.at
this repo has no description
1.report-modal-container {
2 width: 100%;
3 max-height: 100%;
4 display: flex;
5 flex-direction: column;
6 max-width: 40em;
7 background-color: var(--bg-color);
8 box-shadow: 0 16px 32px -8px var(--drop-shadow-color);
9 overflow-y: auto;
10 animation: slide-up-smooth 0.3s ease-in-out;
11 position: relative;
12
13 @media (min-width: 40em) {
14 max-height: calc(100% - 32px);
15 }
16
17 h1 {
18 margin: 0;
19 padding: 0;
20 }
21
22 .top-controls {
23 position: sticky;
24 top: var(--sai-top, 0);
25 z-index: 1;
26 background-color: var(--bg-blur-color);
27 backdrop-filter: blur(16px);
28 padding: 16px;
29 padding: calc(var(--sai-top, 0) + 16px) calc(var(--sai-right, 0) + 16px)
30 16px calc(var(--sai-left, 0) + 16px);
31 display: flex;
32 gap: 8px;
33 justify-content: space-between;
34 pointer-events: auto;
35 align-items: center;
36
37 h1 {
38 white-space: nowrap;
39 overflow: hidden;
40 text-overflow: ellipsis;
41 }
42 }
43
44 main {
45 padding: 0 16px 16px;
46 padding: 0 calc(var(--sai-right, 0) + 16px)
47 calc(var(--sai-bottom, 0) + 16px) calc(var(--sai-left, 0) + 16px);
48 /* display: flex;
49 flex-direction: column;
50 gap: 16px; */
51 }
52
53 form {
54 /* display: flex; */
55 /* flex-direction: column; */
56 /* gap: 16px; */
57 text-wrap: pretty;
58
59 input {
60 margin-inline: 0;
61 }
62 }
63
64 .report-preview {
65 background-color: var(--bg-color);
66 border-radius: 8px;
67 border: 2px dashed var(--red-color);
68 box-shadow: inset 0 0 16px -4px var(--red-bg-color);
69 overflow: auto;
70 max-height: 33vh;
71
72 .status {
73 font-size: 90%;
74 user-select: none;
75 pointer-events: none;
76 -webkit-touch-callout: none;
77 -webkit-user-drag: none;
78 filter: grayscale(0.5);
79 }
80
81 .account-block {
82 margin: 16px;
83 user-select: none;
84 pointer-events: none;
85 -webkit-touch-callout: none;
86 -webkit-user-drag: none;
87 filter: grayscale(0.5);
88 }
89 }
90
91 .rubber-stamp {
92 pointer-events: none;
93 user-select: none;
94 position: absolute;
95 inset-inline-end: 32px;
96 margin-top: -48px;
97 animation: rubber-stamp 0.3s ease-in both;
98 position: absolute;
99 font-weight: bold;
100 color: var(--red-color);
101 text-transform: uppercase;
102 letter-spacing: -0.5px;
103 font-size: 2em;
104 line-height: 1;
105 padding: 0.1em;
106 border: 0.15em solid var(--red-color);
107 border-radius: 0.3em;
108 background-color: var(--bg-blur-color);
109 text-align: center;
110 /* Noise pattern - https://css-tricks.com/making-static-noise-from-a-weird-css-gradient-bug/ */
111 mask-image: repeating-conic-gradient(
112 #000 0 0.01%,
113 rgba(0, 0, 0, 0.45) 0 0.02%
114 );
115
116 small {
117 display: block;
118 font-size: 11px;
119 }
120 }
121
122 p {
123 margin-block: 0.5em;
124 }
125
126 section {
127 label {
128 display: flex;
129 gap: 8px;
130 align-items: center;
131 cursor: pointer;
132 margin-bottom: 8px;
133
134 &:has(:checked) {
135 .insignificant {
136 color: var(--text-color);
137 }
138 }
139 }
140 > label:last-child {
141 margin-bottom: 0;
142 }
143 }
144
145 .report-categories {
146 label {
147 align-items: flex-start;
148 }
149
150 .report-rules {
151 margin-inline-start: 1.75em;
152 }
153 }
154
155 .report-comment {
156 display: flex;
157 gap: 8px;
158 align-items: flex-start;
159 margin-top: 2em;
160 flex-wrap: wrap;
161
162 p {
163 margin: 0;
164 padding: 8px 0 0;
165 flex-shrink: 0;
166
167 label {
168 margin-bottom: 0;
169 }
170 }
171
172 textarea {
173 flex-grow: 1;
174 resize: vertical;
175 }
176 }
177
178 footer {
179 margin-top: 2em;
180 display: flex;
181 gap: 8px;
182 align-items: center;
183
184 button {
185 border-radius: 8px !important;
186 align-self: stretch;
187 }
188 }
189}
190
191@keyframes rubber-stamp {
192 0% {
193 transform: rotate(-20deg) scale(5);
194 opacity: 0;
195 }
196 100% {
197 transform: rotate(-20deg) scale(1);
198 opacity: 1;
199 }
200}