/* Account corner in the header, the /login page and the /messages page. */ [hidden] { display: none !important; } /* Round person picture, used in the header, the chat, the forum and /login. */ .avatar { --avatar: var(--teal); flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #0a1413; border: 2px solid var(--avatar); color: var(--avatar); font: 800 13px/1 var(--display); } .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar-lg { width: 52px; height: 52px; font-size: 19px; } .account-bar { display: flex; align-items: center; gap: 14px; margin-left: 8px; } .acct-btn { padding: 7px 14px; border: 2px solid var(--yellow); color: var(--yellow); font: 700 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; transition: background .2s, color .2s; } .acct-btn:hover { background: var(--yellow); color: var(--ink); } .acct-mail { position: relative; display: grid; place-items: center; color: var(--teal); } .acct-mail:hover { color: var(--yellow); } .acct-badge { position: absolute; top: -7px; right: -9px; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; border-radius: 9px; background: var(--orange); color: var(--ink); font: 700 10px/1 var(--mono); } /* Which half of the account corner is shown is decided before the page is painted, by the data-account attribute js/session.js puts on . The picture, the colour and the initials come from this browser, so a returning visitor never sees "Log in" flash first. */ .acct-me { display: grid; place-items: center; } .acct-me .avatar { width: 32px; height: 32px; font-size: 12px; --avatar: var(--acct-color, var(--teal)); } .acct-me .avatar::before { content: var(--acct-initials, ""); } .acct-me .avatar:has(img)::before { content: none; } html[data-account="in"] .acct-btn, html[data-account="stale"] .acct-btn { display: none; } html:not([data-account="in"]):not([data-account="stale"]) .acct-mail, html:not([data-account="in"]):not([data-account="stale"]) .acct-me { display: none; } /* The key is known but the extension is not answering: still you, greyed. */ html[data-account="stale"] .acct-me .avatar { opacity: .6; border-style: dashed; } /* The account page scrolls like a normal page. */ .account-main.login-main { display: block; overflow-y: auto; } /* login page */ .account-main { padding-bottom: 20px; } .account-grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 20px; align-items: start; } .account-grid .side-card { margin: 0; } .go-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px; } .avatar-row { display: flex; gap: 14px; align-items: flex-start; margin: 4px 0 20px; } .avatar-row .avatar-lg { width: 64px; height: 64px; font-size: 22px; flex: none; } .avatar-actions { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .avatar-actions .inline-row { align-items: center; } .avatar-actions .small-btn { padding: 7px 14px; } .avatar-status { margin: 0; min-height: 1em; font-size: 11px; color: #8a938b; } .avatar-status.ok { color: var(--green); } .avatar-status.bad { color: var(--orange); } /* messages */ .dm-shell { display: grid; grid-template-columns: 320px minmax(0, 1fr); border: 2px solid var(--teal); background: linear-gradient(160deg, #0b1716, #050a09 70%); flex: 1; min-height: 0; overflow: hidden; } .dm-list-pane { display: flex; flex-direction: column; border-right: 1px solid #1f3a37; min-width: 0; } .dm-thread-pane { display: flex; flex-direction: column; min-width: 0; } .dm-list { flex: 1; overflow-y: auto; } .dm-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #16211f; min-width: 0; } .dm-row:hover { background: #0c1817; } .dm-row.active { background: #0f2220; border-left: 3px solid var(--teal); padding-left: 11px; } .dm-row-main { flex: 1; min-width: 0; } .dm-row-main strong { display: block; font: 700 17px/1.1 var(--display); text-transform: uppercase; color: var(--paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dm-snippet { display: block; margin-top: 3px; color: #7d877f; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dm-row.unread .dm-row-main strong { color: var(--yellow); } .dm-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .dm-row-side time { color: #6d766f; font-size: 10px; white-space: nowrap; } .dm-unread { min-width: 18px; padding: 1px 5px; border-radius: 9px; background: var(--orange); color: var(--ink); font: 700 10px/1.6 var(--mono); text-align: center; } .dm-new { padding: 12px 14px; border-top: 1px solid #1f3a37; background: #07100f; } .dm-new label { display: block; margin-bottom: 6px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); } .dm-new input { width: 100%; padding: 9px 11px; background: #0d1918; border: 1px solid #2a3f3c; color: var(--paper); font: 12px var(--mono); } .dm-new input:focus { outline: none; border-color: var(--teal); } .dm-new .form-error { margin-top: 6px; } .dm-messages { flex: 1; overflow-y: auto; padding: 12px 18px 16px; } .dm-messages .msg { max-width: none; } .dm-back { display: none; } .dm-thread-pane .room-bar { gap: 10px; } @media (max-width: 900px) { .account-grid { grid-template-columns: 1fr; } .dm-shell { grid-template-columns: 1fr; } .dm-list-pane { border-right: 0; } .dm-shell.thread-open .dm-list-pane { display: none; } .dm-shell:not(.thread-open) .dm-thread-pane { display: none; } .dm-back { display: inline-block; margin: 0 4px 0 0; } } @media (max-width: 800px) { .account-bar { gap: 10px; margin-left: 4px; } .acct-me .avatar { width: 28px; height: 28px; font-size: 11px; } .acct-btn { padding: 6px 10px; } } /* Same idea as the chat: in landscape the inbox fills the visible viewport so the message box is never pushed below the fold. */ @media (orientation: landscape) and (max-height: 620px) { .dm-new { padding: 8px 12px; } .dm-new label { margin-bottom: 4px; } .dm-messages { padding: 8px 12px 10px; } }