flessinglabs/pc-live
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
pc-live/nui/css/bleeter-embedded.css

695 lines
21 KiB
CSS
Raw Permalink Normal View History

IC-Computer: Schreibtisch, Fenster und Apps Ein Computer im Spiel. Man tritt an ein Terminal, drueckt E, und bekommt eine Oberflaeche mit Mail, Browser, Adressbuch, Kalender und weiteren Anwendungen. Andere Resources haengen sich als App ein. Auf ESX umgestellt: - Fuenf harte Abhaengigkeiten zeigten auf Resources, die es hier nicht gibt. Eine fehlende Abhaengigkeit verhindert den Start vollstaendig - die Resource waere nie hochgekommen. - Die Bruecke zum Framework neu geschrieben; Charakterdaten, Aktenverwaltung und Immobilien ausgebaut, weil die zugehoerigen Systeme fehlen. - pc_live_devices fehlte im Schema, wird vom Code aber gelesen. Ohne die Tabelle ist kein fester PC ansprechbar. Ein PC braucht ausserdem zwei Eintraege mit derselben Kennung: Standort in der Datenbank, Kamerafahrt in der config.lua. Mail ueberarbeitet: - Postfaecher haengen an einer Anmeldung statt an der Person. Mehrere Leute koennen dasselbe Firmenpostfach gleichzeitig offen haben. - Ordner gehoeren zum Postfach, nicht zur Person. Eine Mail an ein geteiltes Postfach wird je Empfaenger einmal gespeichert; damit das Einsortieren trotzdem fuer alle gilt, tragen alle Kopien einer Zustellung dieselbe Kennung. Gelesen und geloescht bleibt persoenlich - das ist keine Eigenschaft der Nachricht, sondern der Person. - Signaturen gehoeren ebenfalls zum Postfach. - Kalender koennen privat, geteilt oder oeffentlich sein. Ein oeffentlicher Termin haengt bewusst auch an einem Postfach, sonst koennte ihn spaeter niemand mehr aendern oder absagen. Neue Apps: Webhosting, Bleeter und dessen Verwaltung. Behoben: - prompt(), confirm() und alert() froren das NUI ein. FiveMs CEF hat keinen Handler fuer die eingebauten Browserdialoge - der Aufruf oeffnet nichts und kehrt nie zurueck. Ersetzt durch eigene Dialoge. - Die Fenster tragen data-wid, keine id. Wer sie mit getElementById sucht, schreibt ins Leere und das Fenster bleibt leer. Enthaelt README.md mit Einrichtung und PLUGINS.md: eine Anleitung, wie man eine eigene App baut und einhaengt, mit vollstaendigem Beispiel von der Tabelle bis zum Schreibtischsymbol.
2026-08-09 12:02:11 +00:00
/* Erzeugt aus bleeter/html/style.css – nicht von Hand aendern.
Jeder Selektor ist auf .bl-root gekapselt, damit Bleeters Farben und
Schrift nicht den uebrigen PC einfaerben. */
.bl-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)}
.bl-root *{box-sizing: border-box;}
.bl-root{color: var(--text);font-family: Inter, Arial, Helvetica, sans-serif}
.bl-root button,.bl-root input,.bl-root textarea{font: inherit;}
.bl-root button{cursor: pointer;}
.bl-root .hidden{display: none !important;}
.bl-root .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;}
.bl-root .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;}
.bl-root .screen{position: absolute;
inset: 22px;
border-radius: 48px;
background: var(--bg);
overflow: hidden;}
.bl-root .topbar{height: 92px;
display: grid;
grid-template-columns: 212px minmax(0, 1fr) 320px 58px 44px;
gap: 18px;
align-items: center;
padding: 0 54px;}
.bl-root .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;}
.bl-root .top-close:hover{background: rgba(229, 57, 53, 0.16);
border-color: rgba(229, 57, 53, 0.5);
color: #ff8a80;}
.bl-root .brand{height: 58px;
border: 0;
border-radius: 0 0 8px 8px;
padding: 0;
background: transparent;
overflow: hidden;}
.bl-root .brand img{width: 100%;
height: 100%;
display: block;
object-fit: contain;}
.bl-root .search-wrap{position: relative;}
.bl-root .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;}
.bl-root .global-search::placeholder{color: #53627a;}
.bl-root .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);}
.bl-root .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);}
.bl-root .search-result img{width: 36px;
height: 36px;
border-radius: 999px;
object-fit: cover;}
.bl-root .top-profile{width: 54px;
height: 54px;
border: 2px solid var(--green);
border-radius: 999px;
padding: 0;
background: #0b1a2c;
overflow: hidden;}
.bl-root .top-profile img{width: 100%;
height: 100%;
object-fit: cover;
display: block;}
.bl-root .app-grid{height: calc(100% - 92px);
display: grid;
grid-template-columns: 86px minmax(0, 1fr) 300px;
gap: 22px;
padding: 0 54px 38px;}
.bl-root .side-nav{display: flex;
flex-direction: column;
gap: 9px;
padding-top: 20px;
padding-bottom: 8px;
overflow: hidden;}
.bl-root .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;}
.bl-root .nav-button.active{color: var(--green);
background: #092541;
box-shadow: inset 3px 0 0 var(--green);}
.bl-root .nav-icon{display: grid;
place-items: center;
min-height: 22px;
font-size: 20px;
line-height: 1;}
.bl-root .nav-icon svg{width: 20px;
height: 20px;
display: block;}
.bl-root .nav-label{font-size: 9px;
font-weight: 700;
line-height: 1.05;
max-width: 58px;
overflow-wrap: anywhere;}
.bl-root .content,.bl-root .context{min-width: 0;
overflow: auto;
scrollbar-color: var(--green) transparent;
scrollbar-width: thin;}
.bl-root .content{padding: 36px 0 8px;}
.bl-root .context{padding: 36px 0 8px;}
.bl-root .section-title{display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
margin-bottom: 18px;}
.bl-root .section-title h1{margin: 0;
font-size: 25px;
line-height: 1.1;}
.bl-root .section-title p{margin: 4px 0 0;
color: var(--muted);
font-size: 13px;}
.bl-root .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);}
.bl-root .avatar{width: 52px;
height: 52px;
border: 2px solid var(--green);
border-radius: 999px;
object-fit: cover;
background: #12243a;}
.bl-root .compose textarea{width: 100%;
min-height: 74px;
resize: none;
border: 0;
outline: 0;
color: var(--text);
background: transparent;}
.bl-root .compose-actions{display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-top: 10px;}
.bl-root .upload-row{display: flex;
align-items: center;
gap: 10px;
min-width: 0;
flex-wrap: wrap;}
.bl-root .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;}
.bl-root .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;}
.bl-root .url-upload-row{display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: center;}
.bl-root .toast-layer{position: absolute;
right: 34px;
bottom: 32px;
z-index: 30;
display: grid;
gap: 10px;
width: min(360px, 30vw);
pointer-events: none;}
.bl-root .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;}
.bl-root .toast-error{border-color: rgba(255, 79, 95, 0.55);
color: #ffd7dc;}
.bl-root .toast-success{border-color: rgba(25, 216, 137, 0.55);
color: #b8ffdf;}
.bl-root .hint{color: var(--muted);
font-size: 12px;}
.bl-root .primary-button,.bl-root .ghost-button,.bl-root .danger-button{border-radius: 999px;
padding: 10px 18px;
font-size: 13px;
font-weight: 900;}
.bl-root .primary-button{border: 0;
color: #001527;
background: var(--green);}
.bl-root .ghost-button{border: 1px solid rgba(255, 255, 255, 0.12);
color: var(--text);
background: rgba(255, 255, 255, 0.04);}
.bl-root .danger-text{border-color: rgba(255, 79, 95, 0.42);
color: #ff6d7b;}
.bl-root .danger-button{border: 1px solid rgba(255, 79, 95, 0.6);
color: var(--red);
background: rgba(255, 79, 95, 0.08);}
.bl-root .feed-list{display: grid;
gap: 18px;}
.bl-root .post-card{overflow: hidden;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--panel);}
.bl-root .post-head{display: grid;
grid-template-columns: 54px minmax(0, 1fr) auto;
gap: 14px;
align-items: center;
padding: 16px 18px;}
.bl-root .author-link{display: inline-flex;
align-items: center;
gap: 6px;
border: 0;
padding: 0;
color: var(--text);
background: transparent;
text-align: left;}
.bl-root .author-name{display: flex;
align-items: center;
gap: 6px;
font-weight: 900;}
.bl-root .handle{color: var(--muted);
font-size: 12px;
font-weight: 700;}
.bl-root .verified,.bl-root .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;}
.bl-root .verified svg,.bl-root .staff-badge svg{width: 18px;
height: 18px;}
.bl-root .staff-badge{color: #fff;
background: transparent;}
.bl-root .verified + .staff-badge{margin-left: 4px;}
.bl-root .post-time{color: var(--muted);
font-size: 12px;}
.bl-root .post-body{padding: 0 18px 16px 86px;
white-space: pre-wrap;
font-size: 14px;
line-height: 1.45;}
.bl-root .post-image{display: block;
width: 100%;
max-height: 480px;
object-fit: cover;
background: #101a29;}
.bl-root .post-actions{display: flex;
gap: 22px;
align-items: center;
padding: 14px 18px;
color: var(--text);
border-top: 1px solid var(--line);}
.bl-root .action-link{border: 0;
color: var(--text);
background: transparent;
font-size: 13px;
font-weight: 400;}
.bl-root .danger-text{color: var(--red);}
.bl-root .icon-action{width: 28px;
height: 28px;
display: inline-grid;
place-items: center;
border-radius: 8px;
background: transparent;}
.bl-root .icon-action svg{width: 16px;
height: 16px;
display: block;}
.bl-root .danger-icon{border: 1px solid rgba(255, 79, 95, 0.35);
color: var(--red);}
.bl-root .danger-icon:hover{background: rgba(255, 79, 95, 0.1);}
.bl-root .comment-actions{display: flex;
align-items: center;
gap: 12px;}
.bl-root .comments-panel{display: grid;
gap: 10px;
padding: 14px 18px 18px 86px;
border-top: 1px solid var(--line);
background: rgba(0, 0, 0, 0.1);}
.bl-root .comment-form{display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;}
.bl-root .comment-form input,.bl-root .market-search,.bl-root .market-sort,.bl-root .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);}
.bl-root .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);}
.bl-root .comment-item strong{display: block;
margin-bottom: 3px;}
.bl-root .market-tools{display: grid;
grid-template-columns: minmax(0, 1fr) 210px;
gap: 12px;
margin-bottom: 18px;}
.bl-root .market-post{display: grid;
grid-template-columns: minmax(0, 1fr) 110px;
gap: 12px;
align-items: start;}
.bl-root .market-compose-grid{display: grid;
grid-template-columns: minmax(0, 1fr) 220px;
gap: 10px;
margin-bottom: 10px;}
.bl-root .price-input{border-color: rgba(25, 216, 137, 0.36);}
.bl-root .market-author{display: grid;
grid-template-columns: 42px minmax(0, 1fr);
gap: 10px;
align-items: center;
margin-bottom: 12px;}
.bl-root .market-avatar-link{width: 42px;
height: 42px;
border: 0;
border-radius: 999px;
padding: 0;
background: transparent;}
.bl-root .market-avatar-link img,.bl-root .market-avatar-link span,.bl-root .market-author > img,.bl-root .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;}
.bl-root .market-author p{margin: 2px 0 0;}
.bl-root .market-author-name{display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;}
.bl-root .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);}
.bl-root .mail-icon-button svg{width: 15px;
height: 15px;}
.bl-root .market-image{width: 100%;
max-height: 260px;
object-fit: cover;
border-radius: 8px;
margin-top: 12px;}
.bl-root .market-side{display: grid;
justify-items: end;
align-content: start;
gap: 12px;}
.bl-root .price-tag{justify-self: end;
padding: 8px 12px;
border-radius: 999px;
color: #001527;
background: var(--green);
font-weight: 900;}
.bl-root .calendar-list{display: grid;
gap: 10px;}
.bl-root .day-card{border: 1px solid var(--line);
border-radius: 8px;
padding: 14px 16px;
color: var(--text);
background: var(--panel);
text-align: left;
cursor: pointer;}
.bl-root .day-card.active{border-color: rgba(25, 216, 137, 0.72);
box-shadow: inset 3px 0 0 var(--green);}
.bl-root .day-title{font-size: 18px;
font-weight: 900;}
.bl-root .event-line{margin-top: 5px;
color: var(--text);
font-size: 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;}
.bl-root .event-editor{display: grid;
gap: 12px;}
.bl-root .event-editor-head{display: flex;
justify-content: space-between;
gap: 12px;
font-weight: 900;}
.bl-root .legal-text{max-width: 980px;
white-space: pre-line;
font-size: 15px;
line-height: 1.55;}
.bl-root .profile-editor{max-width: 820px;}
.bl-root .edit-form{display: grid;
gap: 14px;
padding: 18px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--panel);}
.bl-root .edit-form label,.bl-root .event-editor label{display: grid;
gap: 7px;
color: var(--text);
font-size: 13px;
font-weight: 900;}
.bl-root .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);}
.bl-root .edit-actions{display: flex;
justify-content: flex-end;
gap: 10px;}
.bl-root .page-grid{display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;}
.bl-root .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;}
.bl-root .business-card.closed{filter: grayscale(0.8);
opacity: 0.62;}
.bl-root .business-banner{position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;}
.bl-root .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));}
.bl-root .business-avatar{width: 78px;
height: 78px;
border: 4px solid var(--green);
border-radius: 999px;
object-fit: cover;}
.bl-root .business-label{max-width: 74%;
padding: 12px 20px;
border-radius: 8px;
background: rgba(3, 12, 28, 0.94);}
.bl-root .business-label strong{display: flex;
align-items: center;
gap: 7px;
font-size: 23px;
line-height: 1.05;}
.bl-root .status-strip{height: 14px;
margin-bottom: 22px;
border-radius: 0 0 999px 999px;
background: var(--green);}
.bl-root .status-strip.closed{background: #586477;}
.bl-root .profile-hero{position: relative;
overflow: hidden;
min-height: 310px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--panel);}
.bl-root .comment-author-link{border: 0;
padding: 0;
color: var(--text);
background: transparent;
font-weight: 900;}
.bl-root .profile-banner{width: 100%;
height: 210px;
object-fit: cover;
display: block;}
.bl-root .profile-banner-empty{background: linear-gradient(135deg, #082443, #0e332f);}
.bl-root .profile-meta{display: grid;
grid-template-columns: 140px minmax(0, 1fr) auto;
gap: 18px;
align-items: end;
padding: 0 24px 24px;
margin-top: -58px;}
.bl-root .profile-avatar{width: 128px;
height: 128px;
border: 4px solid var(--green);
border-radius: 999px;
object-fit: cover;
background: #102036;}
.bl-root .profile-avatar-empty{display: grid;
place-items: center;
color: var(--green);
font-size: 42px;
font-weight: 900;}
.bl-root .profile-actions{display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
flex-wrap: wrap;}
.bl-root .moderation-actions{display: inline-flex;
align-items: center;
gap: 8px;}
.bl-root .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);}
.bl-root .moderation-icon-button svg{width: 18px;
height: 18px;}
.bl-root .moderation-icon-button.active{color: #001527;
background: var(--green);}
.bl-root .moderation-icon-button.danger{border-color: rgba(255, 79, 95, 0.42);
color: var(--red);
background: rgba(255, 79, 95, 0.08);}
.bl-root .moderation-icon-button.danger.active{color: #fff;
background: rgba(255, 79, 95, 0.92);}
.bl-root .profile-mail-button{width: 40px;
height: 40px;}
.bl-root .profile-mail-button svg{width: 18px;
height: 18px;}
.bl-root .profile-meta h1{display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: 32px;}
.bl-root .profile-meta p{margin: 8px 0 0;
color: var(--muted);}
.bl-root .profile-stats{display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;}
.bl-root .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);}
.bl-root .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;}
.bl-root .profile-stats button:hover::after{opacity: 1;}
.bl-root .profile-stats svg{width: 15px;
height: 15px;
flex: 0 0 auto;}
.bl-root .profile-stats strong{color: var(--text);
font-size: 13px;
font-weight: 400;
line-height: 1.1;}
.bl-root .profile-content-section{scroll-margin-top: 18px;}
.bl-root .profile-content-section{display: grid;
gap: 12px;
margin-top: 18px;}
.bl-root .profile-content-section h2{margin: 0;
font-size: 18px;}
.bl-root .profile-event-card h3{margin-bottom: 8px;}
.bl-root .simple-list{display: grid;
gap: 12px;}
.bl-root .list-card,.bl-root .context-card{padding: 16px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--panel);}
.bl-root .list-card h3,.bl-root .context-card h3{margin: 0 0 6px;
font-size: 15px;}
.bl-root .list-card p,.bl-root .context-card p{margin: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.35;}
.bl-root .context-title{display: flex;
align-items: center;
gap: 10px;
margin: 0 0 14px;
font-size: 16px;}
.bl-root .context-stack{display: grid;
gap: 12px;}
.bl-root .suggestion{display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto;
gap: 12px;
align-items: center;}
.bl-root .suggestion-avatar{width: 42px;
height: 42px;
border-radius: 999px;
background: #8b97a8;
display: grid;
place-items: center;
font-weight: 900;}
.bl-root .mini-button{border: 0;
border-radius: 999px;
padding: 9px 15px;
color: #001527;
background: var(--green);
font-size: 12px;
font-weight: 900;}
.bl-root .social-section{display: grid;
gap: 10px;
margin-bottom: 18px;}
.bl-root .social-section h2{margin: 0;
font-size: 16px;}
.bl-root .social-row{display: flex;
justify-content: space-between;
gap: 16px;
align-items: center;}
.bl-root .social-actions{display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;}
.bl-root .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) {.bl-root .tablet{min-height: 640px;}
.bl-root .app-grid{grid-template-columns: 78px minmax(0, 1fr) 260px;
gap: 16px;
padding-inline: 36px;}
.bl-root .topbar{padding-inline: 36px;}}
Reference in a new issue Copy permalink