@import url("../../styles/variables.css");:root { --font-sans:var(--fontFamilyBody); --font-mono:"Courier New", monospace; --border-radius-lg:5px;}.slack-app-con { container-name:slack-app-con; container-type:inline-size; /* We want it to appear like an image, so make it noninteractive */ user-select:none; pointer-events:none; scale:1; display:flex; height:620px; font-family:var(--font-sans); font-size:13px; background:#1a1d21; color:#d1d2d3; border-radius:var(--border-radius-lg); overflow:hidden; margin-bottom:var(--gutter); .sidebar-icons { width:56px; background:#111214; display:flex; flex-direction:column; align-items:center; padding:8px 0; gap:2px; } .icon-btn { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; } .icon-btn:hover { background:rgba(255, 255, 255, 0.1); } .icon-btn.active { background:#481449; } .avatar-small { width:36px; height:36px; border-radius:8px; background:#4a4a4a; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:500; color:#fff; } .sidebar-icons .spacer { flex:1; } .sidebar { width:230px; background:#1a1d21; border-right:1px solid rgba(255, 255, 255, 0.08); display:flex; flex-direction:column; @container slack-app-con (max-width:600px){ display:none; } } .sidebar-header { padding:12px 14px 8px; border-bottom:1px solid rgba(255, 255, 255, 0.06); } .workspace-name { font-weight:700; font-size:14px; color:#fff; display:flex; align-items:center; justify-content:space-between; } .workspace-name svg { opacity:0.5; } .sidebar-section { padding:4px 0; } .sidebar-item { display:flex; align-items:center; gap:8px; padding:5px 14px; cursor:pointer; border-radius:0; color:#9ba1a6; font-size:13px; } .sidebar-item:hover { background:rgba(255, 255, 255, 0.06); color:#d1d2d3; } .sidebar-item svg { opacity:0.6; flex-shrink:0; } .sidebar-item .badge { margin-left:auto; font-size:11px; background:rgba(255, 255, 255, 0.12); border-radius:10px; padding:1px 6px; color:#9ba1a6; } .sidebar-item .app-logo-sh{ width:20px; height:20px; background:var(--white); border-radius:4px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:8px; color:#1a1d21; flex-shrink:0; background-size:80%; background-image:url('/i/assets/SyncHubLogo120x120.png'); background-repeat:no-repeat; background-position:center; } .sidebar-divider { height:1px; background:rgba(255, 255, 255, 0.06); margin:6px 0; } .section-label { padding:8px 14px 4px; font-size:12px; color:#6b7280; font-weight:500; display:flex; align-items:center; justify-content:space-between; } .sidebar-item.active { background:#481449; color:#fff; border-radius:0; } .sidebar-item.active svg { opacity:1; } .main { flex:1; background:#1a1d21; display:flex; flex-direction:column; } .chat-header { flex:0 0 auto; padding:10px 16px; border-bottom:1px solid rgba(255, 255, 255, 0.08); display:flex; align-items:center; justify-content:space-between; } .chat-header-left { display:flex; align-items:center; gap:10px; .app-logo { width:30px; height:30px; background:var(--white); border-radius:6px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:11px; color:#1a1d21; background-image:url('/i/assets/SyncHubLogo120x120.png'); background-repeat:no-repeat; background-position:center; background-size:80%; } } .chat-title { font-weight:700; font-size:16px; color:#fff; } .tab-bar { flex:0 0 auto; display:flex; gap:0; border-bottom:1px solid rgba(255, 255, 255, 0.08); padding:0 16px; } .tab { padding:8px 14px; font-size:13px; color:#9ba1a6; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; } .tab.active { color:#fff; border-bottom-color:#fff; font-weight:500; } .chat-body { flex:1 1 auto; min-height:1px; overflow:hidden; /* The scroll is cool, but ruins the 'image' effect we are going for */ /* overflow-y:auto; */ justify-content:flex-end; /* anchor content to the bottom */ padding:16px; display:flex; flex-direction:column; gap:16px; } .app-intro { display:flex; align-items:flex-start; gap:12px; } .app-logo-large { background-image:url('/i/assets/SyncHubLogo120x120.png'); background-repeat:no-repeat; background-position:center; background-size:80%; width:48px; height:48px; background-color:var(--white); border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; color:#1a1d21; flex-shrink:0; } .app-intro-content .app-name-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; } .app-name { font-weight:700; font-size:17px; color:#fff; } .app-badge { font-size:10px; background:rgba(255, 255, 255, 0.15); color:#9ba1a6; border-radius:3px; padding:1px 5px; font-weight:500; } .app-desc { font-size:13px; color:#9ba1a6; line-height:1.6; } .app-link { color:#36c5f0; text-decoration:none; display:flex; align-items:center; gap:4px; font-size:13px; margin-top:8px; } .msg { display:flex; gap:10px; align-items:flex-start; &.slack{ .msg-avatar{ /* Give it some padding around the transparent image */ background-size:70%; background-color:var(--white); } } .msg-avatar { width:32px; height:32px; background-size:cover; background-position:center; background-repeat:no-repeat; border-radius:6px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:10px; color:#1a1d21; flex-shrink:0; } } .msg-content .msg-header { display:flex; align-items:center; gap:8px; margin-bottom:3px; } .msg-sender { font-weight:700; font-size:13px; color:#fff; } .msg-time { font-size:11px; color:#6b7280; } .msg-text { font-size:13px; color:#d1d2d3; line-height:1.6; } .msg-text .cmd { background:rgba(255, 255, 255, 0.1); border:1px solid rgba(255, 255, 255, 0.15); border-radius:3px; padding:0 4px; font-family:var(--font-mono); font-size:11px; color:#e8912d; } .chat-input-area { flex:0 0 auto; padding:12px 16px; border-top:1px solid rgba(255, 255, 255, 0.08); } .input-toolbar { display:flex; gap:10px; align-items:center; margin-bottom:8px; padding:0 2px; } .toolbar-btn { width:20px; height:20px; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0.5; color:#d1d2d3; font-size:13px; font-weight:700; } .toolbar-divider { width:1px; height:16px; background:rgba(255, 255, 255, 0.15); } .input-box { border:1px solid rgba(255, 255, 255, 0.15); border-radius:8px; padding:10px 12px; font-size:13px; color:#6b7280; background:rgba(255, 255, 255, 0.04); } .input-footer { display:flex; gap:14px; align-items:center; margin-top:8px; padding:0 2px; } .footer-btn { opacity:0.45; cursor:pointer; font-size:13px; color:#d1d2d3; } .send-btn { margin-left:auto; width:28px; height:28px; border-radius:6px; background:rgba(255, 255, 255, 0.08); display:flex; align-items:center; justify-content:center; cursor:pointer; } .arrow-indicator { width:20px; height:24px; background:#e01e5a; border-radius:50%; display:flex; align-items:center; justify-content:center; position:absolute; }}/* Cache CSSParserMiddleware_www.synchub.io_/Pages/blog/articles/slack.css_False_HTML_32604220411 22 Apr 08:09:33Z */