Add player bug reports and profile identity features
This commit is contained in:
264
app/support.css
Normal file
264
app/support.css
Normal file
@@ -0,0 +1,264 @@
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.header-report {
|
||||
display: inline-flex;
|
||||
gap: 7px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 44px;
|
||||
color: var(--text);
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.support-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
|
||||
gap: 50px;
|
||||
}
|
||||
.support-layout h1,
|
||||
.support-conversation h1 {
|
||||
margin-top: 14px;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.support-form form,
|
||||
.support-conversation form {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
.support-form label,
|
||||
.support-conversation label {
|
||||
font-weight: 650;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.support-form input,
|
||||
.support-form textarea,
|
||||
.support-conversation textarea {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
background: var(--panel);
|
||||
color: var(--text);
|
||||
padding: 12px;
|
||||
font: 16px var(--font-body, sans-serif);
|
||||
}
|
||||
.support-form textarea,
|
||||
.support-conversation textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
.support-form small {
|
||||
color: var(--muted);
|
||||
}
|
||||
.support-form form .button,
|
||||
.support-conversation form .button {
|
||||
justify-self: start;
|
||||
}
|
||||
.support-inbox {
|
||||
border-left: 1px solid var(--line);
|
||||
padding-left: 28px;
|
||||
}
|
||||
.support-inbox ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.support-inbox li {
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.support-inbox strong,
|
||||
.support-inbox small {
|
||||
display: block;
|
||||
}
|
||||
.support-inbox small {
|
||||
margin-top: 6px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.support-conversation {
|
||||
max-width: 850px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.support-conversation > .eyebrow {
|
||||
display: block;
|
||||
margin-top: 28px;
|
||||
}
|
||||
.support-screenshot {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 400px;
|
||||
object-fit: contain;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
margin: 24px 0;
|
||||
}
|
||||
.support-messages {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
margin: 24px 0;
|
||||
}
|
||||
.support-message {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 18px;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.support-message-staff {
|
||||
border-color: var(--accent, #8dce66);
|
||||
}
|
||||
.support-message-system {
|
||||
border-style: dashed;
|
||||
}
|
||||
.support-message header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
.support-message small {
|
||||
color: var(--muted);
|
||||
}
|
||||
.support-message p {
|
||||
white-space: pre-wrap;
|
||||
margin: 12px 0;
|
||||
}
|
||||
.support-reward {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 16px;
|
||||
border: 1px solid #dac880;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.support-reward small {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.username-glow {
|
||||
color: #ffe6a1;
|
||||
text-shadow:
|
||||
0 0 8px #ffca6090,
|
||||
0 0 18px #ffca6060;
|
||||
}
|
||||
.username {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
overflow-wrap: anywhere;
|
||||
white-space: normal;
|
||||
}
|
||||
.username > span {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
.username-prefix {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font:
|
||||
600 11px/1.4 Arial,
|
||||
sans-serif;
|
||||
padding: 2px 6px;
|
||||
border: 1px solid currentColor;
|
||||
border-radius: 5px;
|
||||
text-shadow: none;
|
||||
}
|
||||
.username-prefix svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.username-moderator {
|
||||
color: #91d3ff;
|
||||
}
|
||||
.username-bug-finder {
|
||||
color: #ffe6a1;
|
||||
}
|
||||
.username-custom-prefix {
|
||||
color: #cdb8ff;
|
||||
}
|
||||
.username-preview {
|
||||
padding: 18px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
.glow-settings input[type="color"] {
|
||||
width: 90px;
|
||||
height: 48px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.prefix-search {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
.prefix-search .field {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
.prefix-player-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.prefix-player-list button {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
background: var(--panel);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
.prefix-player-list button[aria-pressed="true"] {
|
||||
border-color: #91d3ff;
|
||||
}
|
||||
.prefix-player-list small {
|
||||
display: block;
|
||||
color: var(--muted);
|
||||
margin-top: 5px;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.prefix-editor {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
@media (max-width: 1000px) {
|
||||
.header-report span {
|
||||
display: none;
|
||||
}
|
||||
.header-report {
|
||||
width: 44px;
|
||||
}
|
||||
.header-actions {
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.support-layout {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 32px;
|
||||
}
|
||||
.support-inbox {
|
||||
border-left: 0;
|
||||
padding-left: 0;
|
||||
border-top: 1px solid var(--line);
|
||||
padding-top: 20px;
|
||||
}
|
||||
.header-actions {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user