Bjoern Flessing
20076b0aee
Jeder Spieler waehlt sich ein Handle mit @, Unternehmen und Behoerden bekommen
eigene Profile, fuer die sie Mitarbeiter freigeben.
Verwaltet wird ueber dieselbe Anmeldung wie das Webhosting: wer am IC-Computer
als Anbieter angemeldet ist, richtet Unternehmensprofile ein. Damit gibt es
genau eine Stelle, an der Verwaltungsrechte haengen - ein zweites Rechtesystem
daneben waere eine zweite Stelle, an der man jemanden zu entziehen vergisst.
Bewusst getrennt: wer fuer ein Unternehmen schreiben darf, kann sich nicht
selbst zum Verwalter machen.
Behoben gegenueber dem Ausgangsstand:
- Die Resource startete nicht. Eine harte Abhaengigkeit zeigte auf eine
Resource, die es nicht gibt - das verhindert den Start vollstaendig.
- Das Schema war gegenueber dem Code stehengeblieben: eine Tabelle fehlte
ganz, sechs Spalten fehlten. Jede Registrierung eines Handles scheiterte
deshalb mit einem SQL-Fehler. Zwei Migrationen ziehen das nach.
- Die Identitaet kommt jetzt von ESX statt von einem Charaktersystem, das
hier nicht laeuft. Ohne das findet das Mailsystem die Postfaecher nicht.
- Das Fenster hatte keinen Schliessknopf, nur ESC. Im Computerfenster ist
diese Taste aber schon vergeben.
- Bilder laden mit referrerpolicy="no-referrer": Bilderdienste sperren
Hotlinks anhand der Herkunft, und die eines NUI kennen sie nicht.
- Der Schluessel fuer den Bilder-Upload steht nicht mehr im Code, sondern in
der server.cfg (set bleeter_imgbb_key). Er gehoert nicht in ein oeffentlich
einsehbares Repository.
Neu: Unternehmensprofile und Mitarbeiterfreigabe, ueber Netzwerkereignisse und
Konsolenbefehle. Dazu eine Oberflaeche im IC-Computer, die dieselbe Gestaltung
benutzt - die Stildatei wird dafuer mechanisch gekapselt, statt sie nachzubauen.
Enthaelt README.md mit Einrichtung, Rechten und den Fallstricken.
1255 lines
22 KiB
CSS
1255 lines
22 KiB
CSS
:root {
|
||
--bg: #020414;
|
||
--panel: #061325;
|
||
--panel-2: #091a31;
|
||
--panel-3: #0d203a;
|
||
--line: rgba(255, 255, 255, 0.08);
|
||
--text: #f5f8ff;
|
||
--muted: #71809b;
|
||
--green: #19d889;
|
||
--green-2: #00b978;
|
||
--red: #ff4f5f;
|
||
--gold: #f2b866;
|
||
--shadow: 0 24px 80px rgba(0, 0, 0, 0.58);
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html { background: transparent; overflow: hidden; }
|
||
|
||
body {
|
||
margin: 0;
|
||
min-height: 100vh;
|
||
overflow: hidden;
|
||
color: var(--text);
|
||
font-family: Inter, Arial, Helvetica, sans-serif;
|
||
background: transparent;
|
||
}
|
||
|
||
button,
|
||
input,
|
||
textarea {
|
||
font: inherit;
|
||
}
|
||
|
||
button {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.hidden {
|
||
display: none !important;
|
||
}
|
||
|
||
.bleeter-root {
|
||
position: fixed;
|
||
inset: 0;
|
||
display: grid;
|
||
place-items: center;
|
||
padding: 24px;
|
||
background: radial-gradient(circle at top, #203248 0, #0b1020 42%, #03040b 100%);
|
||
}
|
||
|
||
/* ── Phone-Modus: Tablet-Rahmen mit max. 80 % Breite ── */
|
||
.bleeter-root.mode-phone .tablet {
|
||
width: min(1280px, 82vw);
|
||
}
|
||
|
||
/* ── Desktop-Modus: kein Tablet-Rahmen, PC-Fenster ── */
|
||
.bleeter-root.mode-desktop {
|
||
padding: 0;
|
||
background: rgba(0, 0, 0, 0.55);
|
||
backdrop-filter: blur(4px);
|
||
align-items: center;
|
||
justify-items: center;
|
||
}
|
||
|
||
.bleeter-root.mode-desktop .tablet {
|
||
width: min(1440px, 90vw);
|
||
height: min(860px, 88vh);
|
||
aspect-ratio: unset;
|
||
min-height: unset;
|
||
border-radius: 12px;
|
||
border: 1px solid #2a3040;
|
||
box-shadow: 0 32px 80px rgba(0,0,0,0.7);
|
||
}
|
||
|
||
.bleeter-root.mode-desktop .tablet-glass {
|
||
display: none;
|
||
}
|
||
|
||
.bleeter-root.mode-desktop .screen {
|
||
inset: 0;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.tablet {
|
||
position: relative;
|
||
width: min(1680px, 96vw);
|
||
aspect-ratio: 16 / 7.45;
|
||
min-height: 700px;
|
||
border: 13px solid #313943;
|
||
border-radius: 72px;
|
||
background: #020414;
|
||
box-shadow: var(--shadow), inset 0 0 0 5px #77818b;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.tablet-glass {
|
||
position: absolute;
|
||
inset: 7px;
|
||
border-radius: 58px;
|
||
pointer-events: none;
|
||
box-shadow: inset 0 2px 12px rgba(255, 255, 255, 0.22), inset 0 -24px 60px rgba(255, 255, 255, 0.04);
|
||
z-index: 5;
|
||
}
|
||
|
||
.screen {
|
||
position: absolute;
|
||
inset: 22px;
|
||
border-radius: 48px;
|
||
background: var(--bg);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.topbar {
|
||
height: 92px;
|
||
display: grid;
|
||
/* letzte Spalte: der Schliessen-Knopf */
|
||
grid-template-columns: 212px minmax(0, 1fr) 320px 58px 44px;
|
||
gap: 18px;
|
||
align-items: center;
|
||
padding: 0 54px;
|
||
}
|
||
|
||
/* Schliessen. Es gab bisher nur ESC – im PC-Fenster ist die Taste aber schon
|
||
vergeben, und ohne sichtbaren Ausweg sitzt man fest. */
|
||
.top-close {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||
background: rgba(255, 255, 255, 0.05);
|
||
color: rgba(255, 255, 255, 0.66);
|
||
font-size: 16px;
|
||
line-height: 1;
|
||
cursor: pointer;
|
||
transition: background .15s, color .15s, border-color .15s;
|
||
}
|
||
|
||
.top-close:hover {
|
||
background: rgba(229, 57, 53, 0.16);
|
||
border-color: rgba(229, 57, 53, 0.5);
|
||
color: #ff8a80;
|
||
}
|
||
|
||
.brand {
|
||
height: 58px;
|
||
border: 0;
|
||
border-radius: 0 0 8px 8px;
|
||
padding: 0;
|
||
background: transparent;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.brand img {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.search-wrap {
|
||
position: relative;
|
||
}
|
||
|
||
.global-search {
|
||
width: 100%;
|
||
height: 44px;
|
||
border: 1px solid rgba(25, 216, 137, 0.38);
|
||
border-radius: 999px;
|
||
outline: 0;
|
||
padding: 0 18px;
|
||
color: var(--text);
|
||
background: rgba(5, 20, 38, 0.94);
|
||
font-size: 14px;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.global-search::placeholder {
|
||
color: #53627a;
|
||
}
|
||
|
||
.search-results {
|
||
position: absolute;
|
||
top: 52px;
|
||
right: 0;
|
||
width: 100%;
|
||
z-index: 20;
|
||
display: grid;
|
||
gap: 8px;
|
||
padding: 8px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
background: #051426;
|
||
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
|
||
}
|
||
|
||
.search-result {
|
||
display: grid;
|
||
grid-template-columns: 36px minmax(0, 1fr);
|
||
gap: 10px;
|
||
align-items: center;
|
||
border: 0;
|
||
border-radius: 8px;
|
||
padding: 8px;
|
||
text-align: left;
|
||
color: var(--text);
|
||
background: rgba(255, 255, 255, 0.04);
|
||
}
|
||
|
||
.search-result img {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 999px;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.top-profile {
|
||
width: 54px;
|
||
height: 54px;
|
||
border: 2px solid var(--green);
|
||
border-radius: 999px;
|
||
padding: 0;
|
||
background: #0b1a2c;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.top-profile img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
|
||
.app-grid {
|
||
height: calc(100% - 92px);
|
||
display: grid;
|
||
grid-template-columns: 86px minmax(0, 1fr) 300px;
|
||
gap: 22px;
|
||
padding: 0 54px 38px;
|
||
}
|
||
|
||
.side-nav {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 9px;
|
||
padding-top: 20px;
|
||
padding-bottom: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.nav-button {
|
||
width: 64px;
|
||
height: 58px;
|
||
border: 0;
|
||
border-radius: 8px;
|
||
color: #52617a;
|
||
background: #071b34;
|
||
display: grid;
|
||
place-items: center;
|
||
gap: 3px;
|
||
transition: color 0.15s ease, background 0.15s ease;
|
||
}
|
||
|
||
.nav-button.active {
|
||
color: var(--green);
|
||
background: #092541;
|
||
box-shadow: inset 3px 0 0 var(--green);
|
||
}
|
||
|
||
.nav-icon {
|
||
display: grid;
|
||
place-items: center;
|
||
min-height: 22px;
|
||
font-size: 20px;
|
||
line-height: 1;
|
||
}
|
||
|
||
.nav-icon svg {
|
||
width: 20px;
|
||
height: 20px;
|
||
display: block;
|
||
}
|
||
|
||
.nav-label {
|
||
font-size: 9px;
|
||
font-weight: 700;
|
||
line-height: 1.05;
|
||
max-width: 58px;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.content,
|
||
.context {
|
||
min-width: 0;
|
||
overflow: auto;
|
||
scrollbar-color: var(--green) transparent;
|
||
scrollbar-width: thin;
|
||
}
|
||
|
||
.content {
|
||
padding: 36px 0 8px;
|
||
}
|
||
|
||
.context {
|
||
padding: 36px 0 8px;
|
||
}
|
||
|
||
.section-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 16px;
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.section-title h1 {
|
||
margin: 0;
|
||
font-size: 25px;
|
||
line-height: 1.1;
|
||
}
|
||
|
||
.section-title p {
|
||
margin: 4px 0 0;
|
||
color: var(--muted);
|
||
font-size: 13px;
|
||
}
|
||
|
||
.compose {
|
||
display: grid;
|
||
grid-template-columns: 52px minmax(0, 1fr);
|
||
gap: 14px;
|
||
padding: 16px;
|
||
margin-bottom: 18px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
background: var(--panel);
|
||
}
|
||
|
||
.avatar {
|
||
width: 52px;
|
||
height: 52px;
|
||
border: 2px solid var(--green);
|
||
border-radius: 999px;
|
||
object-fit: cover;
|
||
background: #12243a;
|
||
}
|
||
|
||
.compose textarea {
|
||
width: 100%;
|
||
min-height: 74px;
|
||
resize: none;
|
||
border: 0;
|
||
outline: 0;
|
||
color: var(--text);
|
||
background: transparent;
|
||
}
|
||
|
||
.compose-actions {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.upload-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
min-width: 0;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.upload-button {
|
||
border: 1px solid rgba(25, 216, 137, 0.45);
|
||
border-radius: 999px;
|
||
padding: 8px 13px;
|
||
color: var(--green);
|
||
background: rgba(25, 216, 137, 0.08);
|
||
font-size: 12px;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.media-url-input {
|
||
width: min(360px, 42vw);
|
||
min-height: 34px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
outline: 0;
|
||
padding: 0 10px;
|
||
color: var(--text);
|
||
background: rgba(255, 255, 255, 0.04);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.url-upload-row {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) auto;
|
||
gap: 10px;
|
||
align-items: center;
|
||
}
|
||
|
||
.toast-layer {
|
||
position: absolute;
|
||
right: 34px;
|
||
bottom: 32px;
|
||
z-index: 30;
|
||
display: grid;
|
||
gap: 10px;
|
||
width: min(360px, 30vw);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.toast {
|
||
padding: 13px 15px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
color: var(--text);
|
||
background: rgba(6, 19, 37, 0.96);
|
||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
|
||
font-size: 13px;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.toast-error {
|
||
border-color: rgba(255, 79, 95, 0.55);
|
||
color: #ffd7dc;
|
||
}
|
||
|
||
.toast-success {
|
||
border-color: rgba(25, 216, 137, 0.55);
|
||
color: #b8ffdf;
|
||
}
|
||
|
||
.hint {
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.primary-button,
|
||
.ghost-button,
|
||
.danger-button {
|
||
border-radius: 999px;
|
||
padding: 10px 18px;
|
||
font-size: 13px;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.primary-button {
|
||
border: 0;
|
||
color: #001527;
|
||
background: var(--green);
|
||
}
|
||
|
||
.ghost-button {
|
||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||
color: var(--text);
|
||
background: rgba(255, 255, 255, 0.04);
|
||
}
|
||
|
||
.danger-text {
|
||
border-color: rgba(255, 79, 95, 0.42);
|
||
color: #ff6d7b;
|
||
}
|
||
|
||
.danger-button {
|
||
border: 1px solid rgba(255, 79, 95, 0.6);
|
||
color: var(--red);
|
||
background: rgba(255, 79, 95, 0.08);
|
||
}
|
||
|
||
.feed-list {
|
||
display: grid;
|
||
gap: 18px;
|
||
}
|
||
|
||
.post-card {
|
||
overflow: hidden;
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
background: var(--panel);
|
||
}
|
||
|
||
.post-head {
|
||
display: grid;
|
||
grid-template-columns: 54px minmax(0, 1fr) auto;
|
||
gap: 14px;
|
||
align-items: center;
|
||
padding: 16px 18px;
|
||
}
|
||
|
||
.author-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
border: 0;
|
||
padding: 0;
|
||
color: var(--text);
|
||
background: transparent;
|
||
text-align: left;
|
||
}
|
||
|
||
.author-name {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.handle {
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.verified,
|
||
.staff-badge {
|
||
display: inline-grid;
|
||
width: 18px;
|
||
height: 18px;
|
||
place-items: center;
|
||
border-radius: 999px;
|
||
color: #001527;
|
||
background: var(--green);
|
||
font-size: 13px;
|
||
font-weight: 1000;
|
||
}
|
||
|
||
.verified svg,
|
||
.staff-badge svg {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
.staff-badge {
|
||
color: #fff;
|
||
background: transparent;
|
||
}
|
||
|
||
.verified + .staff-badge {
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.post-time {
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.post-body {
|
||
padding: 0 18px 16px 86px;
|
||
white-space: pre-wrap;
|
||
font-size: 14px;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.post-image {
|
||
display: block;
|
||
width: 100%;
|
||
max-height: 480px;
|
||
object-fit: cover;
|
||
background: #101a29;
|
||
}
|
||
|
||
.post-actions {
|
||
display: flex;
|
||
gap: 22px;
|
||
align-items: center;
|
||
padding: 14px 18px;
|
||
color: var(--text);
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
|
||
.action-link {
|
||
border: 0;
|
||
color: var(--text);
|
||
background: transparent;
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.danger-text {
|
||
color: var(--red);
|
||
}
|
||
|
||
.icon-action {
|
||
width: 28px;
|
||
height: 28px;
|
||
display: inline-grid;
|
||
place-items: center;
|
||
border-radius: 8px;
|
||
background: transparent;
|
||
}
|
||
|
||
.icon-action svg {
|
||
width: 16px;
|
||
height: 16px;
|
||
display: block;
|
||
}
|
||
|
||
.danger-icon {
|
||
border: 1px solid rgba(255, 79, 95, 0.35);
|
||
color: var(--red);
|
||
}
|
||
|
||
.danger-icon:hover {
|
||
background: rgba(255, 79, 95, 0.1);
|
||
}
|
||
|
||
.comment-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.comments-panel {
|
||
display: grid;
|
||
gap: 10px;
|
||
padding: 14px 18px 18px 86px;
|
||
border-top: 1px solid var(--line);
|
||
background: rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.comment-form {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) auto;
|
||
gap: 10px;
|
||
}
|
||
|
||
.comment-form input,
|
||
.market-search,
|
||
.market-sort,
|
||
.event-input {
|
||
min-height: 38px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
outline: 0;
|
||
padding: 0 12px;
|
||
color: var(--text);
|
||
background: rgba(255, 255, 255, 0.04);
|
||
}
|
||
|
||
.comment-item {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) auto;
|
||
gap: 12px;
|
||
align-items: center;
|
||
padding: 10px 12px;
|
||
border-radius: 8px;
|
||
background: rgba(255, 255, 255, 0.04);
|
||
}
|
||
|
||
.comment-item strong {
|
||
display: block;
|
||
margin-bottom: 3px;
|
||
}
|
||
|
||
.market-tools {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) 210px;
|
||
gap: 12px;
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.market-post {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) 110px;
|
||
gap: 12px;
|
||
align-items: start;
|
||
}
|
||
|
||
.market-compose-grid {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) 220px;
|
||
gap: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.price-input {
|
||
border-color: rgba(25, 216, 137, 0.36);
|
||
}
|
||
|
||
.market-author {
|
||
display: grid;
|
||
grid-template-columns: 42px minmax(0, 1fr);
|
||
gap: 10px;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.market-avatar-link {
|
||
width: 42px;
|
||
height: 42px;
|
||
border: 0;
|
||
border-radius: 999px;
|
||
padding: 0;
|
||
background: transparent;
|
||
}
|
||
|
||
.market-avatar-link img,
|
||
.market-avatar-link span,
|
||
.market-author > img,
|
||
.market-author > span {
|
||
width: 42px;
|
||
height: 42px;
|
||
border-radius: 999px;
|
||
object-fit: cover;
|
||
display: grid;
|
||
place-items: center;
|
||
border: 2px solid var(--green);
|
||
background: #102036;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.market-author p {
|
||
margin: 2px 0 0;
|
||
}
|
||
|
||
.market-author-name {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 7px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.mail-icon-button {
|
||
width: 28px;
|
||
height: 28px;
|
||
border: 1px solid rgba(25, 216, 137, 0.35);
|
||
border-radius: 999px;
|
||
padding: 0;
|
||
display: inline-grid;
|
||
place-items: center;
|
||
color: var(--green);
|
||
background: rgba(25, 216, 137, 0.08);
|
||
}
|
||
|
||
.mail-icon-button svg {
|
||
width: 15px;
|
||
height: 15px;
|
||
}
|
||
|
||
.market-image {
|
||
width: 100%;
|
||
max-height: 260px;
|
||
object-fit: cover;
|
||
border-radius: 8px;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.market-side {
|
||
display: grid;
|
||
justify-items: end;
|
||
align-content: start;
|
||
gap: 12px;
|
||
}
|
||
|
||
.price-tag {
|
||
justify-self: end;
|
||
padding: 8px 12px;
|
||
border-radius: 999px;
|
||
color: #001527;
|
||
background: var(--green);
|
||
font-weight: 900;
|
||
}
|
||
|
||
.calendar-list {
|
||
display: grid;
|
||
gap: 10px;
|
||
}
|
||
|
||
.day-card {
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
padding: 14px 16px;
|
||
color: var(--text);
|
||
background: var(--panel);
|
||
text-align: left;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.day-card.active {
|
||
border-color: rgba(25, 216, 137, 0.72);
|
||
box-shadow: inset 3px 0 0 var(--green);
|
||
}
|
||
|
||
.day-title {
|
||
font-size: 18px;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.event-line {
|
||
margin-top: 5px;
|
||
color: var(--text);
|
||
font-size: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
|
||
.event-editor {
|
||
display: grid;
|
||
gap: 12px;
|
||
}
|
||
|
||
.event-editor-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
font-weight: 900;
|
||
}
|
||
|
||
|
||
.legal-text {
|
||
max-width: 980px;
|
||
white-space: pre-line;
|
||
font-size: 15px;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.profile-editor {
|
||
max-width: 820px;
|
||
}
|
||
|
||
.edit-form {
|
||
display: grid;
|
||
gap: 14px;
|
||
padding: 18px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
background: var(--panel);
|
||
}
|
||
|
||
.edit-form label,
|
||
.event-editor label {
|
||
display: grid;
|
||
gap: 7px;
|
||
color: var(--text);
|
||
font-size: 13px;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.edit-textarea {
|
||
min-height: 120px;
|
||
resize: vertical;
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
outline: 0;
|
||
padding: 11px 12px;
|
||
color: var(--text);
|
||
background: rgba(255, 255, 255, 0.04);
|
||
}
|
||
|
||
.edit-actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 10px;
|
||
}
|
||
|
||
.page-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 22px;
|
||
}
|
||
|
||
.business-card {
|
||
position: relative;
|
||
width: 100%;
|
||
min-height: 114px;
|
||
overflow: hidden;
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
background: var(--panel-2);
|
||
padding: 0;
|
||
color: var(--text);
|
||
text-align: left;
|
||
}
|
||
|
||
.business-card.closed {
|
||
filter: grayscale(0.8);
|
||
opacity: 0.62;
|
||
}
|
||
|
||
.business-banner {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.business-overlay {
|
||
position: relative;
|
||
min-height: 114px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 18px;
|
||
padding: 20px 24px;
|
||
background: linear-gradient(90deg, rgba(2, 4, 20, 0.16), rgba(2, 4, 20, 0.48));
|
||
}
|
||
|
||
.business-avatar {
|
||
width: 78px;
|
||
height: 78px;
|
||
border: 4px solid var(--green);
|
||
border-radius: 999px;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.business-label {
|
||
max-width: 74%;
|
||
padding: 12px 20px;
|
||
border-radius: 8px;
|
||
background: rgba(3, 12, 28, 0.94);
|
||
}
|
||
|
||
.business-label strong {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 7px;
|
||
font-size: 23px;
|
||
line-height: 1.05;
|
||
}
|
||
|
||
.status-strip {
|
||
height: 14px;
|
||
margin-bottom: 22px;
|
||
border-radius: 0 0 999px 999px;
|
||
background: var(--green);
|
||
}
|
||
|
||
.status-strip.closed {
|
||
background: #586477;
|
||
}
|
||
|
||
.profile-hero {
|
||
position: relative;
|
||
overflow: hidden;
|
||
min-height: 310px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
background: var(--panel);
|
||
}
|
||
|
||
.comment-author-link {
|
||
border: 0;
|
||
padding: 0;
|
||
color: var(--text);
|
||
background: transparent;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.profile-banner {
|
||
width: 100%;
|
||
height: 210px;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
|
||
.profile-banner-empty {
|
||
background: linear-gradient(135deg, #082443, #0e332f);
|
||
}
|
||
|
||
.profile-meta {
|
||
display: grid;
|
||
grid-template-columns: 140px minmax(0, 1fr) auto;
|
||
gap: 18px;
|
||
align-items: end;
|
||
padding: 0 24px 24px;
|
||
margin-top: -58px;
|
||
}
|
||
|
||
.profile-avatar {
|
||
width: 128px;
|
||
height: 128px;
|
||
border: 4px solid var(--green);
|
||
border-radius: 999px;
|
||
object-fit: cover;
|
||
background: #102036;
|
||
}
|
||
|
||
.profile-avatar-empty {
|
||
display: grid;
|
||
place-items: center;
|
||
color: var(--green);
|
||
font-size: 42px;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.profile-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.moderation-actions {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.moderation-icon-button {
|
||
width: 40px;
|
||
height: 40px;
|
||
border: 1px solid rgba(25, 216, 137, 0.35);
|
||
border-radius: 8px;
|
||
padding: 0;
|
||
display: inline-grid;
|
||
place-items: center;
|
||
color: var(--green);
|
||
background: rgba(25, 216, 137, 0.06);
|
||
}
|
||
|
||
.moderation-icon-button svg {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
.moderation-icon-button.active {
|
||
color: #001527;
|
||
background: var(--green);
|
||
}
|
||
|
||
.moderation-icon-button.danger {
|
||
border-color: rgba(255, 79, 95, 0.42);
|
||
color: var(--red);
|
||
background: rgba(255, 79, 95, 0.08);
|
||
}
|
||
|
||
.moderation-icon-button.danger.active {
|
||
color: #fff;
|
||
background: rgba(255, 79, 95, 0.92);
|
||
}
|
||
|
||
.profile-mail-button {
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
|
||
.profile-mail-button svg {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
.profile-meta h1 {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin: 0;
|
||
font-size: 32px;
|
||
}
|
||
|
||
.profile-meta p {
|
||
margin: 8px 0 0;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.profile-stats {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.profile-stats button {
|
||
position: relative;
|
||
min-width: 48px;
|
||
height: 30px;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 8px;
|
||
padding: 0 8px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 5px;
|
||
color: var(--green);
|
||
background: rgba(255, 255, 255, 0.035);
|
||
}
|
||
|
||
.profile-stats button::after {
|
||
content: attr(title);
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: calc(100% + 7px);
|
||
transform: translateX(-50%);
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
padding: 5px 8px;
|
||
color: var(--text);
|
||
background: #051426;
|
||
font-size: 11px;
|
||
font-weight: 800;
|
||
white-space: nowrap;
|
||
transition: opacity 0.12s ease;
|
||
}
|
||
|
||
.profile-stats button:hover::after {
|
||
opacity: 1;
|
||
}
|
||
|
||
.profile-stats svg {
|
||
width: 15px;
|
||
height: 15px;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.profile-stats strong {
|
||
color: var(--text);
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
line-height: 1.1;
|
||
}
|
||
|
||
.profile-content-section {
|
||
scroll-margin-top: 18px;
|
||
}
|
||
|
||
.profile-content-section {
|
||
display: grid;
|
||
gap: 12px;
|
||
margin-top: 18px;
|
||
}
|
||
|
||
.profile-content-section h2 {
|
||
margin: 0;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.profile-event-card h3 {
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.simple-list {
|
||
display: grid;
|
||
gap: 12px;
|
||
}
|
||
|
||
.list-card,
|
||
.context-card {
|
||
padding: 16px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
background: var(--panel);
|
||
}
|
||
|
||
.list-card h3,
|
||
.context-card h3 {
|
||
margin: 0 0 6px;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.list-card p,
|
||
.context-card p {
|
||
margin: 0;
|
||
color: var(--muted);
|
||
font-size: 13px;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.context-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin: 0 0 14px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.context-stack {
|
||
display: grid;
|
||
gap: 12px;
|
||
}
|
||
|
||
.suggestion {
|
||
display: grid;
|
||
grid-template-columns: 44px minmax(0, 1fr) auto;
|
||
gap: 12px;
|
||
align-items: center;
|
||
}
|
||
|
||
.suggestion-avatar {
|
||
width: 42px;
|
||
height: 42px;
|
||
border-radius: 999px;
|
||
background: #8b97a8;
|
||
display: grid;
|
||
place-items: center;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.mini-button {
|
||
border: 0;
|
||
border-radius: 999px;
|
||
padding: 9px 15px;
|
||
color: #001527;
|
||
background: var(--green);
|
||
font-size: 12px;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.social-section {
|
||
display: grid;
|
||
gap: 10px;
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.social-section h2 {
|
||
margin: 0;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.social-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
align-items: center;
|
||
}
|
||
|
||
.social-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.protected-pill {
|
||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||
border-radius: 999px;
|
||
padding: 8px 12px;
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
font-weight: 900;
|
||
}
|
||
|
||
@media (max-width: 1280px) {
|
||
.tablet {
|
||
min-height: 640px;
|
||
}
|
||
|
||
.app-grid {
|
||
grid-template-columns: 78px minmax(0, 1fr) 260px;
|
||
gap: 16px;
|
||
padding-inline: 36px;
|
||
}
|
||
|
||
.topbar {
|
||
padding-inline: 36px;
|
||
}
|
||
}
|