* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
background: #000;
color: #fff;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 12px;
}
a {
color: #ff9900;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* --------------------------------------------------
Main shell
-------------------------------------------------- */
.page-shell {
width: 1280px;
min-height: 100vh;
margin: 0 auto;
background-image:
url("/images/global_bg.jpg");
background-repeat:
repeat-y;
background-position:
top center;
background-size:
1280px auto;
border-left:
1px solid #2b2b2b;
border-right:
1px solid #2b2b2b;
}
/* --------------------------------------------------
Header
-------------------------------------------------- */
.forum-header {
height: 145px;
position: relative;
}
.top-nav {
width: 310px;
height: 28px;
position: relative;
z-index: 3;
margin-left: calc(50% - 375px);
margin-right: auto;
display: flex;
align-items: center;
gap: 20px;
padding-left: 0;
border-bottom: none;
}
.top-nav a {
color: white;
font-size: 11px;
font-weight: bold;
line-height: 28px;
text-shadow:
0 1px 2px #000;
white-space: nowrap;
}
.logo-area {
position: absolute;
top: -2px;
left: 0;
right: 0;
z-index: 1;
text-align: center;
pointer-events: none;
}
/* --------------------------------------------------
Main forum area
-------------------------------------------------- */
.forum-wrapper {
width: 630px;
margin: 0 auto;
padding-bottom: 50px;
}
.forum-top-info {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
font-size: 10px;
color: #bcbcbc;
}
.breadcrumb-bar {
min-height: 32px;
background: #141414;
padding: 8px 10px;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}
.breadcrumb-bar strong {
color: #ff9900;
font-size: 14px;
}
.breadcrumb-bar span {
font-size: 10px;
}
/* --------------------------------------------------
Rules
-------------------------------------------------- */
.forum-rules {
border:
1px solid #494949;
background: #151515;
margin-bottom: 12px;
padding: 8px 10px;
}
.forum-rules h2 {
margin: 0 0 8px 0;
font-size: 13px;
color: white;
}
.forum-rules p {
margin: 5px 0;
line-height: 1.35;
}
/* --------------------------------------------------
Forum table
-------------------------------------------------- */
.forum-table {
border:
1px solid #414141;
}
.forum-table-header,
.forum-row {
display: grid;
grid-template-columns:
40px
1fr
45px
45px
135px;
}
.forum-table-header {
background: #191919;
border-bottom:
1px solid #464646;
font-weight: bold;
text-align: center;
}
.forum-table-header > div {
padding: 7px 5px;
border-right:
1px solid #414141;
}
.category-header {
padding: 5px 8px;
color: #ff9900;
background: #090909;
border-bottom:
1px solid #414141;
font-weight: bold;
}
.forum-row {
min-height: 45px;
background: #141414;
border-bottom:
1px solid #414141;
}
.forum-row > div {
padding: 6px;
border-right:
1px solid #414141;
}
.forum-row:last-child {
border-bottom: none;
}
.forum-column {
text-align: left;
}
.forum-name {
display: block;
color: #ff9900;
font-weight: bold;
margin-bottom: 2px;
}
.forum-description {
color: #eee;
font-size: 10px;
}
.icon-column,
.topics-column,
.posts-column,
.last-post-column {
display: flex;
align-items: center;
justify-content: center;
}
.topics-column,
.posts-column {
font-size: 10px;
}
.last-post-column {
text-align: center;
font-size: 9px;
line-height: 1.3;
}
.forum-icon {
width: 20px;
height: 20px;
border:
1px solid #555;
display: flex;
align-items: center;
justify-content: center;
color: #888;
background: #202020;
}
/* --------------------------------------------------
Individual forum page
-------------------------------------------------- */
.forum-title-box {
border: 1px solid #444;
background: #141414;
padding: 10px 12px;
margin-bottom: 10px;
}
.forum-title-box h1 {
margin: 0 0 4px 0;
color: #ff9900;
font-size: 15px;
}
.forum-title-box p {
margin: 0;
color: #ddd;
font-size: 10px;
}
.forum-actions {
display: flex;
justify-content: flex-start;
margin: 8px 0;
}
.forum-actions.bottom {
margin-top: 12px;
}
.forum-button {
padding: 5px 10px;
border: 1px solid #666;
background: linear-gradient(
#2a2a2a,
#111
);
color: #ff9900;
font-size: 10px;
font-weight: bold;
}
.forum-button:disabled {
opacity: 0.6;
}
.topic-table {
border: 1px solid #414141;
}
.topic-table-header,
.topic-row {
display: grid;
grid-template-columns:
40px
1fr
55px
55px
145px;
}
.topic-table-header {
background: #191919;
font-weight: bold;
text-align: center;
border-bottom:
1px solid #414141;
}
.topic-table-header > div {
padding: 7px 5px;
border-right:
1px solid #414141;
}
.topic-row {
min-height: 48px;
background: #141414;
border-bottom:
1px solid #414141;
}
.topic-row:last-child {
border-bottom: none;
}
.topic-row > div {
padding: 6px;
border-right:
1px solid #414141;
}
.topic-icon-column,
.replies-column,
.views-column,
.topic-last-post-column {
display: flex;
align-items: center;
justify-content: center;
}
.topic-name {
display: block;
color: #ff9900;
font-weight: bold;
margin-bottom: 4px;
}
.topic-author {
color: #aaa;
font-size: 9px;
}
.topic-author span {
color: #ddd;
}
.replies-column,
.views-column {
font-size: 10px;
}
.topic-last-post-column {
text-align: center;
font-size: 9px;
line-height: 1.3;
}
.empty-forum {
padding: 18px;
text-align: center;
color: #aaa;
background: #121212;
}
/* --------------------------------------------------
Topic / post page
-------------------------------------------------- */
.topic-page-actions {
margin: 8px 0;
}
.topic-page-actions.bottom {
margin-top: 12px;
}
/* Full post box */
.post {
border: 1px solid #444;
background: #111;
margin-bottom: 8px;
}
/* Post title bar */
.post-header {
min-height: 30px;
padding: 7px 9px;
display: flex;
align-items: center;
justify-content: space-between;
background: #1a1a1a;
border-bottom:
1px solid #444;
color: #eee;
font-size: 10px;
}
.post-number {
color: #999;
}
/* Main post layout */
.post-body {
display: grid;
grid-template-columns:
135px
1fr;
min-height: 150px;
}
/* User panel */
.post-user {
padding: 10px;
border-right:
1px solid #444;
background: #151515;
text-align: center;
}
.post-username {
display: block;
color: #ff9900;
font-weight: bold;
margin-bottom: 4px;
}
.post-rank {
color: #aaa;
font-size: 9px;
margin-bottom: 8px;
}
/* Temporary avatar until accounts exist */
.avatar-placeholder {
width: 80px;
height: 80px;
margin: 0 auto 10px auto;
display: flex;
align-items: center;
justify-content: center;
background: #202020;
border:
1px solid #555;
color: #777;
font-size: 26px;
}
.post-user-info {
color: #aaa;
font-size: 9px;
}
/* Post content */
.post-content {
position: relative;
padding:
32px
14px
18px
14px;
background: #111;
}
.post-meta {
position: absolute;
top: 0;
left: 0;
right: 0;
min-height: 25px;
padding: 6px 10px;
border-bottom:
1px solid #333;
color: #aaa;
font-size: 9px;
}
.post-message {
color: #eee;
font-size: 11px;
line-height: 1.5;
white-space: pre-wrap;
}
/* --------------------------------------------------
Topic creation form
-------------------------------------------------- */
.compose-box {
border:
1px solid #444;
background:
#111;
}
.compose-header {
padding:
7px
10px;
background:
#1a1a1a;
border-bottom:
1px solid #444;
color:
#ff9900;
font-weight:
bold;
}
.form-error {
margin:
10px;
padding:
8px;
border:
1px solid #7a2929;
background:
#2a1111;
color:
#ffaaaa;
}
.form-row {
display:
grid;
grid-template-columns:
110px
1fr;
border-bottom:
1px solid #333;
}
.form-row label {
padding:
10px;
background:
#151515;
border-right:
1px solid #333;
color:
#ddd;
font-weight:
bold;
}
.form-row input,
.form-row textarea {
margin:
8px;
padding:
7px;
border:
1px solid #555;
background:
#090909;
color:
white;
font-family:
Arial,
Helvetica,
sans-serif;
font-size:
11px;
}
.form-row input:focus,
.form-row textarea:focus {
outline:
1px solid #ff9900;
}
.message-row textarea {
resize:
vertical;
min-height:
200px;
}
.compose-actions {
display:
flex;
justify-content:
center;
gap:
8px;
padding:
12px;
}
/* Let elements look like the forum buttons too */
a.forum-button {
display:
inline-block;
text-decoration:
none;
cursor:
pointer;
}
.last-post-info {
width: 100%;
text-align: center;
line-height: 1.25;
}
.last-post-topic {
display: block;
color: #ff9900;
font-weight: bold;
margin-bottom: 2px;
}
.last-post-user {
color: #ddd;
}
.topic-admin-actions {
display: flex;
gap: 6px;
margin-bottom: 10px;
}
.topic-admin-actions form {
margin: 0;
}
.locked-topic-message {
display: inline-block;
padding: 6px 10px;
border: 1px solid #555;
background: #151515;
color: #aaa;
font-size: 10px;
font-weight: bold;
}
.topic-name {
line-height: 1.3;
}
.forum-logo {
display: block;
width: 800px;
height: 72px;
margin: 0 auto;
object-fit: fill;
}
@media (max-width: 1280px) {
.page-shell {
width: 100%;
}
}
/* ==================================================
Mobile layout
================================================== */
@media (max-width: 700px) {
html,
body {
width: 100%;
overflow-x: hidden;
}
body {
font-size: 12px;
}
.form-row select {
width: calc(100% - 16px);
}
/* ----------------------------------------------
Background / page shell
---------------------------------------------- */
.page-shell {
width: 100%;
min-width: 0;
margin: 0;
/*
* Keep the center of the original background
* visible instead of shrinking the entire
* 1280px image into the phone.
*/
background-size: 1280px auto;
background-position: top center;
border-left: none;
border-right: none;
}
/* ----------------------------------------------
Header
---------------------------------------------- */
.forum-header {
height: 125px;
overflow: hidden;
}
.logo-area {
top: 28px;
}
.forum-logo {
width: 100%;
height: auto;
max-width: 520px;
margin: 0 auto;
object-fit: contain;
}
/* Put nav in its own clean row on mobile */
.top-nav {
width: 100%;
height: 30px;
margin: 0;
padding: 0 12px;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 22px;
background: rgba(0, 0, 0, 0.75);
}
.top-nav a {
font-size: 10px;
line-height: 30px;
}
/* ----------------------------------------------
Main forum content
---------------------------------------------- */
.forum-wrapper {
width: 630px;
margin: 0 auto;
padding-bottom: 50px;
position: relative;
}
.forum-top-info {
margin-bottom: 18px;
font-size: 9px;
}
/*
* On narrow screens the second date isn't
* important enough to fight for horizontal room.
*/
.forum-top-info > div:last-child {
display: none;
}
/* ----------------------------------------------
Breadcrumb
---------------------------------------------- */
.breadcrumb-bar {
min-height: 38px;
margin-bottom: 12px;
padding: 8px 10px;
}
.breadcrumb-bar strong {
font-size: 12px;
}
.breadcrumb-bar > span {
display: none;
}
/* ----------------------------------------------
Rules
---------------------------------------------- */
.forum-rules {
padding: 10px;
overflow: hidden;
}
.forum-rules h2 {
font-size: 13px;
}
.forum-rules p {
font-size: 11px;
line-height: 1.45;
overflow-wrap: anywhere;
}
/* ----------------------------------------------
Board index
---------------------------------------------- */
.forum-table {
width: 100%;
overflow: hidden;
}
.forum-table-header,
.forum-row {
grid-template-columns:
34px
minmax(0, 1fr)
42px;
}
/*
* Mobile table:
*
* icon | forum | topics
*
* Posts and Last Post are removed here.
* They make the desktop table unusably wide
* on a phone.
*/
.forum-table-header .posts-column,
.forum-table-header .last-post-column,
.forum-row .posts-column,
.forum-row .last-post-column {
display: none;
}
.forum-table-header > div,
.forum-row > div {
min-width: 0;
}
.forum-column {
overflow: hidden;
}
.forum-name {
font-size: 12px;
overflow-wrap: anywhere;
}
.forum-description {
font-size: 9px;
line-height: 1.3;
overflow-wrap: anywhere;
}
.category-header {
font-size: 13px;
padding: 7px 8px;
}
/* ----------------------------------------------
Individual forum/topic list
---------------------------------------------- */
.topic-table {
width: 100%;
overflow: hidden;
}
.topic-table-header,
.topic-row {
grid-template-columns:
34px
minmax(0, 1fr)
44px;
}
/*
* Keep Replies.
* Hide Views + Last Post on mobile.
*/
.topic-table-header .views-column,
.topic-table-header .topic-last-post-column,
.topic-row .views-column,
.topic-row .topic-last-post-column {
display: none;
}
.topic-title-column {
min-width: 0;
overflow: hidden;
}
.topic-name {
font-size: 12px;
overflow-wrap: anywhere;
}
/* ----------------------------------------------
Topic/post page
---------------------------------------------- */
.post-body {
display: block;
min-height: 0;
}
.post-user {
border-right: none;
border-bottom: 1px solid #444;
padding: 8px;
text-align: left;
}
.post-username {
display: inline-block;
margin-right: 8px;
}
.post-rank {
display: inline-block;
}
.avatar-placeholder {
display: none;
}
.post-user-info {
display: inline-block;
margin-left: 8px;
}
.post-content {
min-height: 100px;
padding:
34px
10px
14px;
}
.post-message {
font-size: 11px;
overflow-wrap: anywhere;
}
/* ----------------------------------------------
Forms
---------------------------------------------- */
.form-row {
display: block;
}
.form-row label {
display: block;
border-right: none;
border-bottom: 1px solid #333;
padding: 7px 8px;
}
.form-row input,
.form-row textarea {
width: calc(100% - 16px);
margin: 8px;
}
/* ----------------------------------------------
Buttons / moderation controls
---------------------------------------------- */
.topic-admin-actions {
flex-wrap: wrap;
}
.forum-button {
font-size: 10px;
}
}
.admin-actions {
margin: 10px 0;
}
.admin-category {
margin-bottom: 14px;
border:
1px solid #414141;
}
.admin-forum-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 8px;
background: #141414;
border-bottom:
1px solid #414141;
}
.admin-forum-row:last-child {
border-bottom: none;
}
.admin-row-actions {
display: flex;
gap: 6px;
align-items: center;
}
.admin-row-actions form {
margin: 0;
}
.danger-button {
color: #ff7777;
border-color: #743838;
}
.form-row select {
margin: 8px;
padding: 7px;
border: 1px solid #555;
background: #090909;
color: white;
}
/* --------------------------------------------------
Delete confirmations
-------------------------------------------------- */
.delete-confirm-box {
border:
1px solid #553838;
background:
#111;
}
.delete-confirm-header {
padding:
8px 10px;
background:
#241313;
border-bottom:
1px solid #553838;
color:
#ff7777;
font-weight:
bold;
}
.delete-confirm-content {
padding:
14px;
}
.delete-confirm-content h2 {
margin:
8px 0 14px;
color:
#ff9900;
}
.delete-warning {
padding:
12px;
border:
1px solid #743838;
background:
#261313;
color:
#ffcccc;
line-height:
1.5;
}
.delete-warning ul {
margin:
8px 0;
}
.delete-confirm-actions {
display:
flex;
gap:
8px;
justify-content:
center;
padding:
12px;
border-top:
1px solid #333;
}
.delete-confirm-actions form {
margin:
0;
}
.form-row select {
margin: 8px;
padding: 7px;
border: 1px solid #555;
background: #090909;
color: white;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 11px;
}
.account-bar {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 8px;
margin-bottom: 8px;
color: #bbb;
font-size: 10px;
}
.account-bar form {
margin: 0;
}
.account-bar strong {
color: #ff9900;
}
.post-message {
color: #eee;
font-size: 11px;
line-height: 1.5;
white-space: normal;
}
.post-message img {
display: block;
max-width: 100%;
height: auto;
margin:
10px auto;
border:
1px solid #444;
}
.post-message a {
color: #ff9900;
}
.post-message blockquote {
margin:
10px 15px;
padding:
8px 10px;
border-left:
3px solid #555;
background:
#181818;
color:
#ccc;
}
.post-message pre,
.post-message code {
font-family:
Consolas,
monospace;
}
.post-message pre {
overflow-x:
auto;
padding:
8px;
background:
#080808;
border:
1px solid #333;
}
.post-message h1,
.post-message h2,
.post-message h3 {
margin:
14px
0
8px;
}
.post-message h2:first-child,
.post-message h3:first-child {
margin-top: 0;
}
.post-message p {
margin:
6px
0;
}
.post-message img {
display: block;
max-width: 100%;
height: auto;
margin:
6px
auto;
border:
1px solid #444;
}
.post-avatar {
display: block;
width: 80px;
height: 80px;
margin: 0 auto 10px;
object-fit: cover;
border: 1px solid #555;
background: #202020;
}
.account-username {
color: #ff9900;
font-weight: bold;
}
.post-rank.admin {
color: #ff9900;
}
.account-profile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 18px;
border-bottom: 1px solid #333;
text-align: center;
}
.account-avatar {
display: flex;
justify-content: center;
width: 100%;
}
.account-avatar img {
display: block;
width: 150px;
height: 150px;
object-fit: cover;
border: 1px solid #555;
}
.account-bar-user {
display: flex;
flex-direction: column;
align-items: flex-end;
line-height: 1.3;
}
.account-username {
color: #ff9900;
font-weight: bold;
}
.my-account-link {
color: #aaa;
font-size: 9px;
}
.my-account-link:hover {
color: #ff9900;
}
.post-avatar {
display: block;
width: 80px;
height: 80px;
margin: 0 auto 10px;
object-fit: cover;
border: 1px solid #555;
background: #202020;
}
.account-profile {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 18px;
border-bottom: 1px solid #333;
text-align: center;
}
.account-avatar {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.account-avatar img {
display: block;
width: 150px;
height: 150px;
margin: 0 auto;
object-fit: cover;
border: 1px solid #555;
}
.account-profile-info {
text-align: center;
}
.account-profile-name {
color: #ff9900;
}
.account-profile-role {
color: #bbb;
font-size: 10px;
}
.admin-user-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 8px;
background: #141414;
border-bottom:
1px solid #414141;
}
.admin-user-row:last-child {
border-bottom: none;
}
.admin-user-info {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.admin-user-avatar,
.admin-user-avatar-placeholder {
width: 40px;
height: 40px;
flex-shrink: 0;
border:
1px solid #555;
background:
#202020;
}
.admin-user-avatar {
object-fit: cover;
}
.admin-user-avatar-placeholder {
display: flex;
align-items: center;
justify-content: center;
color: #777;
}
.admin-user-role {
margin-top: 3px;
color: #aaa;
font-size: 9px;
}
.admin-role-form {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
}
.admin-user-row {
align-items: flex-start;
flex-direction: column;
}
.admin-role-form {
width: 100%;
}
.admin-role-form .admin-select {
flex: 1;
max-width: none;
}
.post-rank.admin {
color: #ff9900;
}
.post-rank.moderator {
color: #7fbfff;
}
.inline-post-action {
display: inline;
margin: 0;
}
.inline-post-action button {
padding: 0;
border: none;
background: none;
cursor: pointer;
font-family: inherit;
}
.post-action-link {
color: #ff9900;
font-size: 9px;
font-weight: bold;
text-decoration: none;
}
.post-action-link:hover {
text-decoration: underline;
}
.danger-link {
color: #ff7777;
}
.post-alliance-tag {
margin-top: -4px;
margin-bottom: 6px;
color: #ff9900;
font-size: 11px;
font-weight: bold;
text-align: center;
}
.forum-top-left {
display: flex;
align-items: center;
gap: 8px;
}
.music-toggle {
position: static;
width: 26px;
height: 26px;
padding: 0;
border: 1px solid #555;
background: linear-gradient(
#222,
#0b0b0b
);
color: #aaa;
font-size: 15px;
font-weight: bold;
line-height: 24px;
text-align: center;
cursor: pointer;
}
.music-toggle:hover {
color: #ff9900;
border-color: #888;
}
.music-toggle.playing {
color: #ff9900;
border-color: #ff9900;
}
@media (max-width: 700px) {
.music-toggle {
width: 24px;
height: 24px;
font-size: 14px;
line-height: 22px;
}
}