/* AlphaRomeo15.org responsive layer */
html,body{max-width:100%;overflow-x:hidden}
img,video,iframe{max-width:100%}
@media (max-width: 980px){
.wrapper{width:96%;min-width:0}
#logo{min-height:92px}
#logo .wrapper{align-items:flex-start;flex-direction:column;gap:10px}
#logo ul.top_links{margin-left:0;justify-content:flex-start;width:100%}
#content{padding-top:14px}
/* keep old MyBB/plugin tables from forcing desktop width */
.tborder,table{max-width:100%}
.tborder{display:table}
td[width="1"],td[width="2"],td[width="5%"]{width:auto!important}
/* classic postbit collapses */
.post.classic .post_author{
width:100%!important;
display:block;
border-right:0;
border-bottom:1px solid #30373a;
}
.post.classic .post_content,
.post.classic .post_controls{margin-left:0!important}
}
@media (max-width: 760px){
body{font-size:13px}
.wrapper{width:94%}
#logo img{max-width:92vw}
#logo ul.top_links{gap:5px}
#logo ul.top_links a,#header ul.menu li a{
min-height:32px;
padding:7px 9px!important;
font-size:11px;
}
#panel .upper .wrapper,#panel .lower .wrapper{display:block}
#panel .lower ul.panel_links,#panel .lower ul.user_links{
float:none;
display:flex;
flex-wrap:wrap;
gap:7px;
margin:3px 0;
}
/* Forum lists: hide low-priority numeric columns on phones */
.tcat small,.thead small{font-size:10px}
.forumdisplay_sticky td:nth-last-child(2),
.forumdisplay_regular td:nth-last-child(2),
table.tborder tr[id^="thread-"] td:nth-last-child(2){
display:none;
}
/* generic horizontal-safe wrapper behavior for plugin tables */
.ar15-scroll,
.table-wrap,
.responsive-table{
width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
.post .post_author div.author_information,
.post .post_author div.author_statistics{
float:none!important;
width:100%!important;
}
.post .post_author div.author_statistics{margin-top:6px}
.author_avatar{float:left;margin:0 10px 6px 0}
.post .author_avatar img{
max-width:76px !important;
max-height:76px !important;
width:auto !important;
height:auto !important;
}
.post .post_content{padding:12px}
.post_controls a{margin-bottom:5px}
input.textbox,textarea,select{max-width:100%!important}
input.textbox[size]{width:100%;max-width:100%}
textarea{width:100%!important}
#footer .upper .language,#footer .upper .theme,
#footer .lower #current_time{float:none;margin:8px 0;display:block}
}
@media (max-width: 560px){
.navigation{font-size:11px;white-space:normal}
td.trow1,td.trow2,.thead,.tcat{padding:8px}
.thead{font-size:12px}
.smalltext{font-size:11px}
/* Make button clusters finger-friendly */
input.button,.button,a.button{padding:8px 10px}
.pagination a,.pagination .pagination_current{margin-bottom:4px}
/* Common legacy 2-column settings/forms become stacked when safe */
table.tborder.responsive-form,
.usercp_nav + table{
width:100%;
}
}
@media (max-width:760px){
.ar15-primary-nav .wrapper{
width:100%;
display:block;
}
.ar15-nav-list{
width:100%;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
}
.ar15-nav-list > li{
min-width:0;
display:block;
}
.ar15-nav-list > li > a,
.ar15-nav-trigger{
justify-content:center;
min-height:44px;
padding:0 7px;
border-bottom:1px solid #252b2d;
font-size:10px;
letter-spacing:.025em;
}
.ar15-nav-icon{display:none}
.ar15-has-dropdown{
grid-column:1 / -1;
}
.ar15-has-dropdown > .ar15-nav-trigger{
justify-content:center;
background:#171b1d;
}
.ar15-dropdown{
position:static;
width:100%;
border-left:0;
border-right:0;
border-radius:0;
box-shadow:none;
}
/* Touch users can focus the Menu control and expose it */
.ar15-has-dropdown:focus-within > .ar15-dropdown{
display:block;
}
.ar15-member-tools{
width:100%;
margin-top:5px;
}
.ar15-member-tools > li{
flex:1 1 auto;
}
.ar15-member-tools a,
.ar15-member-tools .myalerts_popup_wrapper > a{
justify-content:center;
width:100%;
}
.myalerts_popup{
position:fixed!important;
left:4vw!important;
right:4vw!important;
top:110px!important;
width:92vw!important;
max-width:92vw!important;
}
}
@media(max-width:470px){
.ar15-nav-list{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:760px){
.ar15-theme-toggle-item{
margin-left:0!important;
grid-column:1 / -1;
}
.ar15-theme-toggle{
width:100%;
min-height:40px;
justify-content:center;
border-top:1px solid #252b2d;
}
div[id^="tyl_btn_"]{
margin-bottom:5px!important;
}
.tyllist,.tyllist_classic{
margin:7px 0!important;
}
#stream table,
.dvz_stream table,
[class*="auction" i] table,
[id*="auction" i] table,
[class*="subscription" i] table{
font-size:11px;
}
}
/* =========================================================
ALPHAROMEO15 — TRUE MOBILE VIEW
Forces a full-width mobile layout instead of a scaled
miniature desktop site.
========================================================= */
@media screen and (max-width: 760px) {
html,
body {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* =====================================================
MAIN MYBB CONTAINERS
===================================================== */
#container,
#header,
#content,
#footer,
#panel {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.wrapper {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
margin: 0 !important;
padding-left: 10px !important;
padding-right: 10px !important;
}
#content {
padding-top: 10px !important;
}
/* =====================================================
HEADER / LOGO
===================================================== */
#logo {
width: 100% !important;
min-height: 0 !important;
padding: 10px 0 !important;
}
#logo .wrapper {
display: block !important;
text-align: center !important;
}
#logo img {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 94vw !important;
max-height: 80px !important;
margin: 0 auto !important;
}
/* =====================================================
MAIN NAVIGATION
===================================================== */
.ar15-primary-nav {
width: 100% !important;
}
.ar15-primary-nav .wrapper {
padding: 0 !important;
}
.ar15-nav-list {
display: grid !important;
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.ar15-nav-list > li {
display: block !important;
width: 100% !important;
min-width: 0 !important;
}
.ar15-nav-list > li > a,
.ar15-nav-trigger {
display: flex !important;
width: 100% !important;
min-height: 44px !important;
justify-content: center !important;
align-items: center !important;
padding: 8px 6px !important;
font-size: 11px !important;
text-align: center !important;
}
.ar15-has-dropdown,
.ar15-theme-toggle-item {
grid-column: 1 / -1 !important;
}
.ar15-theme-toggle {
width: 100% !important;
justify-content: center !important;
}
.ar15-dropdown {
position: static !important;
width: 100% !important;
max-width: 100% !important;
left: auto !important;
right: auto !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* =====================================================
MEMBER PANEL
===================================================== */
#panel .upper,
#panel .lower {
width: 100% !important;
}
#panel .upper .wrapper,
#panel .lower .wrapper {
width: 100% !important;
padding: 8px 10px !important;
}
.ar15-member-tools {
display: grid !important;
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
width: 100% !important;
gap: 5px !important;
margin: 0 !important;
padding: 0 !important;
}
.ar15-member-tools > li {
width: 100% !important;
min-width: 0 !important;
}
.ar15-member-tools a,
.ar15-member-tools
.myalerts_popup_wrapper > a {
display: flex !important;
width: 100% !important;
min-height: 38px !important;
justify-content: center !important;
text-align: center !important;
}
/* =====================================================
BREADCRUMBS
===================================================== */
.navigation {
width: 100% !important;
margin: 0 0 10px !important;
padding: 8px 10px !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
}
/* =====================================================
TABLES
===================================================== */
table {
max-width: 100% !important;
}
.tborder {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
td,
th {
max-width: 100%;
overflow-wrap: anywhere;
}
/* =====================================================
FORUM INDEX
===================================================== */
.forum_status {
width: 24px !important;
height: 24px !important;
}
/* =====================================================
THREAD LISTS
===================================================== */
table.tborder tr[id^="thread-"]
td:nth-last-child(2) {
display: none !important;
}
table.tborder tr[id^="thread-"]
td {
padding: 8px !important;
}
/* =====================================================
CLASSIC POSTBIT
===================================================== */
.post.classic {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.post.classic .post_author {
display: block !important;
width: 100% !important;
min-width: 0 !important;
padding: 10px !important;
border-right: 0 !important;
border-bottom:
1px solid var(--ar-line) !important;
overflow: hidden !important;
}
/* Compact mobile member header */
.post.classic .author_avatar {
float: left !important;
margin:
0 12px
8px 0 !important;
}
.post.classic
.author_avatar img {
max-width: 70px !important;
max-height: 70px !important;
}
.post.classic
.author_information {
width: auto !important;
text-align: left !important;
}
.post.classic
.author_statistics {
clear: both !important;
width: 100% !important;
margin-top: 8px !important;
padding-top: 8px !important;
columns: 2;
column-gap: 18px;
font-size: 10px !important;
}
.post.classic
.post_content {
display: block !important;
width: 100% !important;
min-width: 0 !important;
margin-left: 0 !important;
padding: 0 !important;
}
.post.classic
.post_head {
width: 100% !important;
padding: 8px 10px !important;
}
.post.classic
.post_body {
width: 100% !important;
min-width: 0 !important;
padding:
12px 10px !important;
font-size: 14px !important;
line-height: 1.6 !important;
overflow-wrap: anywhere !important;
}
/* =====================================================
POSTED IMAGES / VIDEO
===================================================== */
.post_body img,
.post_body video,
.post_body iframe,
.scaleimages img {
width: auto !important;
max-width: 100% !important;
height: auto !important;
}
/* =====================================================
THANK YOU / LIKE LIST
===================================================== */
.post.classic .tyllist,
.post.classic .tyllist_classic,
#content [id^="tyl_"] {
width: auto !important;
max-width: 100% !important;
margin:
8px 10px
10px !important;
padding: 8px 9px !important;
overflow-wrap: anywhere !important;
}
/* =====================================================
POST CONTROLS
===================================================== */
.post.classic
.post_controls {
display: block !important;
width: 100% !important;
margin-left: 0 !important;
padding: 7px !important;
}
.post.classic
.author_buttons,
.post.classic
.post_management_buttons {
float: none !important;
width: 100% !important;
text-align: left !important;
}
.post.classic
.post_controls a {
margin:
3px 2px !important;
padding:
7px 8px !important;
}
/* =====================================================
FORMS
===================================================== */
input.textbox,
textarea,
select {
width: 100% !important;
max-width: 100% !important;
font-size: 16px !important;
}
textarea {
min-height: 140px !important;
}
/* Prevent iPhone zoom when entering forms */
input,
select,
textarea {
font-size: 16px;
}
/* =====================================================
PLUGINS
===================================================== */
#stream,
.dvz_stream,
[class*="auction" i],
[id*="auction" i],
[class*="gallery" i],
[id*="gallery" i],
[class*="subscription" i] {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
}
/* Scroll old plugin tables only when necessary */
#stream,
.dvz_stream,
[class*="auction" i],
[id*="auction" i],
[class*="subscription" i] {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
/* =====================================================
ALERTS POPUP
===================================================== */
#myalerts_alerts_modal {
position: fixed !important;
left: 10px !important;
right: auto !important;
top: 65px !important;
width:
calc(100vw - 20px) !important;
max-width:
calc(100vw - 20px) !important;
max-height: 78vh !important;
overflow-y: auto !important;
z-index: 999999 !important;
}
/* =====================================================
FOOTER
===================================================== */
#footer {
width: 100% !important;
}
#footer .upper,
#footer .lower {
width: 100% !important;
text-align: center;
}
#footer ul.menu {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
}
}
/* =========================================================
VERY SMALL PHONES
========================================================= */
@media screen and (max-width: 480px) {
.wrapper {
padding-left: 7px !important;
padding-right: 7px !important;
}
.post.classic
.author_statistics {
columns: 1 !important;
}
.post.classic
.post_body {
padding:
10px 8px !important;
}
}
/* =========================================================
ALPHAROMEO15 — MOBILE FORUM + THREAD LIST FIX
Prevents forum/thread titles from being squeezed narrow.
========================================================= */
@media screen and (max-width: 760px) {
/* =====================================================
FORUM INDEX / SUBFORUM LIST
===================================================== */
tr[id^="forum_"] {
display: grid !important;
grid-template-columns:
38px minmax(0, 1fr) !important;
width: 100% !important;
border-bottom:
1px solid var(--ar-line-soft) !important;
}
tr[id^="forum_"] > td {
display: block !important;
width: auto !important;
min-width: 0 !important;
max-width: 100% !important;
height: auto !important;
box-sizing: border-box !important;
}
/* Forum status icon */
tr[id^="forum_"] > td:first-child {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
width: 38px !important;
padding: 12px 5px !important;
text-align: center !important;
align-self: start;
}
/* Main forum title / description */
tr[id^="forum_"] > td:nth-child(2) {
grid-column: 2 !important;
grid-row: 1 !important;
width: 100% !important;
padding:
10px 8px
4px !important;
text-align: left !important;
}
/* Make forum title use full available width */
tr[id^="forum_"]
> td:nth-child(2) strong,
tr[id^="forum_"]
> td:nth-child(2) a {
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: normal !important;
}
/*
* Hide desktop Threads / Posts count columns.
* They are useful on desktop but steal too much room
* on a phone.
*/
tr[id^="forum_"] > td:nth-child(3),
tr[id^="forum_"] > td:nth-child(4) {
display: none !important;
}
/* Last post becomes a second line under forum name */
tr[id^="forum_"] > td:last-child {
display: block !important;
grid-column: 2 !important;
grid-row: 2 !important;
width: 100% !important;
padding:
3px 8px
10px !important;
text-align: left !important;
font-size: 11px !important;
color: var(--ar-muted) !important;
border: 0 !important;
}
tr[id^="forum_"] > td:last-child span,
tr[id^="forum_"] > td:last-child a {
white-space: normal !important;
overflow-wrap: anywhere !important;
}
/* =====================================================
THREAD LIST
===================================================== */
tr[id^="thread-"] {
display: grid !important;
grid-template-columns:
32px minmax(0, 1fr) !important;
width: 100% !important;
border-bottom:
1px solid var(--ar-line-soft) !important;
}
tr[id^="thread-"] > td {
display: block !important;
width: auto !important;
min-width: 0 !important;
max-width: 100% !important;
height: auto !important;
box-sizing: border-box !important;
}
/* Thread status icon */
tr[id^="thread-"] > td:first-child {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
width: 32px !important;
padding:
10px 3px !important;
text-align: center !important;
align-self: start;
}
/* Thread subject */
tr[id^="thread-"] > td:nth-child(2) {
grid-column: 2 !important;
grid-row: 1 !important;
width: 100% !important;
padding:
9px 7px
3px !important;
text-align: left !important;
}
tr[id^="thread-"]
> td:nth-child(2) a {
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: normal !important;
}
/* Hide desktop numeric columns */
tr[id^="thread-"] > td:nth-child(3),
tr[id^="thread-"] > td:nth-child(4) {
display: none !important;
}
/*
* Last-post information becomes a compact second row
* instead of stealing half the screen.
*/
tr[id^="thread-"] > td:last-child {
display: block !important;
grid-column: 2 !important;
grid-row: 2 !important;
width: 100% !important;
padding:
3px 7px
9px !important;
text-align: left !important;
font-size: 10px !important;
color: var(--ar-muted) !important;
border: 0 !important;
}
tr[id^="thread-"] > td:last-child a,
tr[id^="thread-"] > td:last-child span {
white-space: normal !important;
overflow-wrap: anywhere !important;
}
/* =====================================================
REMOVE DESKTOP WIDTHS
===================================================== */
tr[id^="forum_"] td[width],
tr[id^="thread-"] td[width] {
width: auto !important;
min-width: 0 !important;
}
/* =====================================================
CATEGORY / COLUMN HEADERS
===================================================== */
/*
* On phones the Threads / Posts / Last Post headings
* aren't useful once we've changed to card layout.
*/
.tcat[width],
.thead[width] {
width: auto !important;
}
/* Prevent parent tables from maintaining desktop sizing */
table.tborder {
table-layout: auto !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
}
}
/* =========================================================
MOBILE THREAD LIST — FIX SQUEEZED COLUMNS
========================================================= */
@media screen and (max-width: 760px) {
/* Main thread table */
#content table.tborder {
width:100% !important;
table-layout:auto !important;
}
/* Thread rows */
#content table.tborder tr[id^="thread-"] {
display:grid !important;
grid-template-columns:34px minmax(0,1fr) !important;
width:100% !important;
border-bottom:1px solid var(--ar-line-soft) !important;
}
#content table.tborder tr[id^="thread-"] > td {
display:block !important;
width:auto !important;
min-width:0 !important;
max-width:none !important;
box-sizing:border-box !important;
}
/* Status icon */
#content table.tborder tr[id^="thread-"] > td:first-child {
grid-column:1 !important;
grid-row:1 / span 2 !important;
width:34px !important;
padding:10px 4px !important;
text-align:center !important;
}
/* Thread title / author */
#content table.tborder tr[id^="thread-"] > td:nth-child(2) {
grid-column:2 !important;
grid-row:1 !important;
width:100% !important;
padding:9px 8px 4px !important;
text-align:left !important;
}
#content table.tborder tr[id^="thread-"] > td:nth-child(2) a,
#content table.tborder tr[id^="thread-"] > td:nth-child(2) span {
white-space:normal !important;
overflow-wrap:anywhere !important;
word-break:normal !important;
}
/* Hide Replies */
#content table.tborder tr[id^="thread-"] > td:nth-child(3) {
display:none !important;
}
/* Hide Views */
#content table.tborder tr[id^="thread-"] > td:nth-child(4) {
display:none !important;
}
/* Hide Rating */
#content table.tborder tr[id^="thread-"] > td:nth-child(5) {
display:none !important;
}
/* Last Post goes under thread title */
#content table.tborder tr[id^="thread-"] > td:last-child {
display:block !important;
grid-column:2 !important;
grid-row:2 !important;
width:100% !important;
padding:3px 8px 10px !important;
text-align:left !important;
font-size:11px !important;
color:var(--ar-muted) !important;
border:0 !important;
}
/* Hide desktop column headers */
#content table.tborder .tcat:nth-child(3),
#content table.tborder .tcat:nth-child(4),
#content table.tborder .tcat:nth-child(5) {
display:none !important;
}
/* Let Thread / Author + Last Post use the remaining room */
#content table.tborder .tcat {
width:auto !important;
min-width:0 !important;
}
}
/* =========================================================
MOBILE FORUM ROWS — CLEAN CARD LAYOUT
========================================================= */
@media screen and (max-width:760px) {
/* Each forum row becomes a compact card */
tr[id^="forum_"] {
display:grid !important;
grid-template-columns:
38px minmax(0,1fr) !important;
width:100% !important;
}
tr[id^="forum_"] > td {
display:block !important;
width:auto !important;
min-width:0 !important;
max-width:none !important;
box-sizing:border-box !important;
}
/* Status icon */
tr[id^="forum_"] > td:first-child {
grid-column:1 !important;
grid-row:1 / span 3 !important;
width:38px !important;
padding:12px 4px !important;
text-align:center !important;
}
/* Forum title + description */
tr[id^="forum_"] > td:nth-child(2) {
grid-column:2 !important;
grid-row:1 !important;
width:100% !important;
padding:10px 8px 5px !important;
text-align:left !important;
}
tr[id^="forum_"] > td:nth-child(2) strong,
tr[id^="forum_"] > td:nth-child(2) a,
tr[id^="forum_"] > td:nth-child(2) .smalltext {
white-space:normal !important;
overflow-wrap:anywhere !important;
word-break:normal !important;
}
/* Hide desktop Threads / Posts cells */
tr[id^="forum_"] > td:nth-child(3),
tr[id^="forum_"] > td:nth-child(4) {
display:none !important;
}
/* Last post becomes a full-width line under description */
tr[id^="forum_"] > td:last-child {
grid-column:2 !important;
grid-row:2 !important;
width:100% !important;
padding:4px 8px 10px !important;
text-align:left !important;
font-size:11px !important;
color:var(--ar-muted) !important;
border:0 !important;
}
/* Hide desktop column labels */
tr[id^="forum_"] .tcat,
table.tborder .tcat[width] {
width:auto !important;
}
/* Hide Threads / Posts headings on mobile */
table.tborder tr > td.tcat:nth-child(3),
table.tborder tr > td.tcat:nth-child(4) {
display:none !important;
}
/* Let forum title header use the remaining width */
table.tborder tr > td.tcat:nth-child(2) {
width:auto !important;
}
}
/* =========================================================
MOBILE FORUM ROW — FINAL CLEAN CARD LAYOUT
========================================================= */
@media screen and (max-width:760px) {
.ar15-forum-row {
display:grid !important;
grid-template-columns:
40px minmax(0,1fr) !important;
width:100% !important;
border-bottom:
1px solid var(--ar-line-soft) !important;
}
.ar15-forum-row > td {
display:block !important;
width:auto !important;
min-width:0 !important;
max-width:none !important;
box-sizing:border-box !important;
}
/* STATUS ICON */
.ar15-forum-row > td:first-child {
grid-column:1 !important;
grid-row:1 / span 2 !important;
width:40px !important;
padding:14px 5px !important;
text-align:center !important;
align-self:start;
}
/* FORUM NAME + DESCRIPTION */
.ar15-forum-row > td:nth-child(2) {
grid-column:2 !important;
grid-row:1 !important;
width:100% !important;
padding:
11px 10px
5px !important;
text-align:left !important;
}
.ar15-forum-row > td:nth-child(2) strong {
font-size:14px !important;
line-height:1.3 !important;
}
.ar15-forum-row > td:nth-child(2) .smalltext {
display:block;
margin-top:3px;
line-height:1.45 !important;
white-space:normal !important;
overflow-wrap:normal !important;
word-break:normal !important;
}
/* REMOVE DESKTOP THREAD + POST COLUMNS */
.ar15-forum-row > td:nth-child(3),
.ar15-forum-row > td:nth-child(4) {
display:none !important;
}
/* LAST POST UNDER FORUM DESCRIPTION */
.ar15-forum-row > td:last-child {
display:block !important;
grid-column:2 !important;
grid-row:2 !important;
width:100% !important;
padding:
4px 10px
11px !important;
text-align:left !important;
white-space:normal !important;
font-size:11px !important;
line-height:1.4 !important;
color:var(--ar-muted) !important;
border:0 !important;
}
.ar15-forum-row > td:last-child a,
.ar15-forum-row > td:last-child span {
white-space:normal !important;
overflow-wrap:normal !important;
word-break:normal !important;
}
/* CATEGORY COLUMN HEADERS:
keep only FORUM on phones */
tbody[id^="cat_"] > tr:first-child > td:nth-child(3),
tbody[id^="cat_"] > tr:first-child > td:nth-child(4),
tbody[id^="cat_"] > tr:first-child > td:nth-child(5) {
display:none !important;
}
tbody[id^="cat_"] > tr:first-child > td:first-child {
width:100% !important;
}
}
/* =========================================================
MOBILE FORUM ROW — RESTORE THREAD / POST COUNTS
AS COMPACT METADATA
========================================================= */
@media screen and (max-width:760px) {
/* THREAD COUNT */
.ar15-forum-row > td:nth-child(3) {
display:block !important;
grid-column:2 !important;
grid-row:2 !important;
width:auto !important;
padding:2px 0 5px 10px !important;
text-align:left !important;
font-size:10px !important;
line-height:1.2 !important;
color:var(--ar-muted) !important;
border:0 !important;
}
.ar15-forum-row > td:nth-child(3)::before {
content:"Threads: ";
color:#b6a27d;
font-weight:800;
}
/* POST COUNT */
.ar15-forum-row > td:nth-child(4) {
display:block !important;
grid-column:2 !important;
grid-row:2 !important;
width:auto !important;
justify-self:start;
margin-left:85px !important;
padding:2px 0 5px !important;
text-align:left !important;
font-size:10px !important;
line-height:1.2 !important;
color:var(--ar-muted) !important;
border:0 !important;
}
.ar15-forum-row > td:nth-child(4)::before {
content:"Posts: ";
color:#b6a27d;
font-weight:800;
}
/* LAST POST NOW GOES BELOW THE COUNTS */
.ar15-forum-row > td:last-child {
grid-column:2 !important;
grid-row:3 !important;
padding:
5px 10px
11px !important;
border-top:
1px solid rgba(255,255,255,.07) !important;
}
/* Status icon spans all information rows */
.ar15-forum-row > td:first-child {
grid-row:1 / span 3 !important;
}
/* Hide the desktop column headings completely */
tbody[id^="cat_"] > tr:first-child > td:nth-child(3),
tbody[id^="cat_"] > tr:first-child > td:nth-child(4),
tbody[id^="cat_"] > tr:first-child > td:nth-child(5) {
display:none !important;
}
}
/* =========================================================
MOBILE FORUM LIST — HIDE REDUNDANT COLUMN HEADER ROW
========================================================= */
@media screen and (max-width:760px) {
tbody[id^="cat_"] > tr:first-child {
display:none !important;
}
}
@media screen and (max-width:760px) {
.ar15-forum-row > td:nth-child(3),
.ar15-forum-row > td:nth-child(4) {
padding-top:4px !important;
padding-bottom:6px !important;
}
.ar15-forum-row > td:last-child {
padding-top:7px !important;
}
}
/* =========================================================
MOBILE MEMBER TOOLS — COMPACT 2-COLUMN GRID
========================================================= */
@media screen and (max-width:760px) {
.ar15-member-tools {
display:grid !important;
grid-template-columns:
repeat(2, minmax(0,1fr)) !important;
gap:5px !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
}
.ar15-member-tools > li {
display:block !important;
width:100% !important;
min-width:0 !important;
margin:0 !important;
}
.ar15-member-tools > li > a,
.ar15-member-tools .myalerts_popup_wrapper,
.ar15-member-tools .myalerts_popup_wrapper > a {
width:100% !important;
min-height:40px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:7px 5px !important;
text-align:center !important;
box-sizing:border-box !important;
}
/* Alert wrapper fills its grid cell */
.ar15-member-tools .myalerts_popup_wrapper {
padding:0 !important;
}
}
/* =========================================================
MOBILE WELCOME ROW — CLEANER LAYOUT
========================================================= */
@media screen and (max-width:760px) {
#panel .upper .wrapper {
display:grid !important;
grid-template-columns:
minmax(0,1fr) auto !important;
align-items:center !important;
gap:8px !important;
padding:8px 10px !important;
}
/* Welcome + avatar */
.ar15-welcome-user {
display:grid !important;
grid-template-columns:
28px minmax(0,1fr) !important;
align-items:center !important;
column-gap:8px !important;
min-width:0 !important;
line-height:1.25 !important;
}
.ar15-mini-avatar {
grid-column:1 !important;
grid-row:1 / span 2 !important;
width:28px !important;
height:28px !important;
flex:0 0 28px !important;
margin:0 !important;
}
/* Keep welcome text compact */
.ar15-welcome-user {
font-size:11px !important;
}
.ar15-welcome-user strong,
.ar15-welcome-user a:not(.logout) {
font-size:12px !important;
}
/* Logout becomes a compact button on the right */
.ar15-welcome-user .logout {
position:absolute !important;
right:10px !important;
padding:4px 7px !important;
border:1px solid #3f474a !important;
border-radius:3px !important;
background:#15191b !important;
color:#ddd !important;
font-size:10px !important;
font-weight:800 !important;
text-transform:uppercase !important;
}
#panel .upper {
position:relative !important;
}
/* Give the welcome text room so logout doesn't overlap */
.ar15-welcome-user {
padding-right:58px !important;
}
}
/* =========================================================
MOBILE WELCOME ROW — FINAL ALIGNMENT
========================================================= */
@media screen and (max-width:760px) {
#panel .upper .wrapper {
position:relative !important;
display:block !important;
padding:8px 10px !important;
}
.ar15-welcome-user {
display:flex !important;
align-items:center !important;
gap:8px !important;
padding-right:60px !important;
font-size:11px !important;
line-height:1.35 !important;
}
.ar15-mini-avatar {
width:28px !important;
height:28px !important;
flex:0 0 28px !important;
margin:0 !important;
}
/* Keep logout neatly on the right */
.ar15-welcome-user .logout {
position:absolute !important;
right:10px !important;
top:50% !important;
transform:translateY(-50%) !important;
margin:0 !important;
padding:3px 7px !important;
font-size:9px !important;
line-height:1.2 !important;
}
/* Last-visit text */
#panel .upper .wrapper > span:not(.ar15-welcome-user) {
display:block !important;
margin-left:36px !important;
margin-top:2px !important;
font-size:10px !important;
line-height:1.3 !important;
color:var(--ar-muted) !important;
white-space:normal !important;
}
}
/* =========================================================
MOBILE WELCOME ROW — TIGHTEN LAST VISIT LINE
========================================================= */
@media screen and (max-width:760px) {
#panel .upper .wrapper {
display:flex !important;
align-items:center !important;
gap:10px !important;
position:relative !important;
}
.ar15-welcome-user {
flex:0 0 auto !important;
padding-right:0 !important;
}
/* everything after the welcome block */
#panel .upper .wrapper > span:not(.ar15-welcome-user) {
display:inline-flex !important;
align-items:center !important;
gap:4px !important;
margin:0 !important;
font-size:10px !important;
line-height:1.2 !important;
color:var(--ar-muted) !important;
white-space:nowrap !important;
}
/* keep logout on far right */
.ar15-welcome-user .logout {
position:absolute !important;
right:10px !important;
top:50% !important;
transform:translateY(-50%) !important;
margin:0 !important;
}
/* make room for logout */
#panel .upper .wrapper {
padding-right:62px !important;
}
}
/* =========================================================
MOBILE HEADER — COLLAPSIBLE QUICK SEARCH
========================================================= */
.ar15-mobile-search-toggle {
display:none;
}
.ar15-sr-only {
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}
@media screen and (max-width:760px) {
/*
* Header member row
*/
#panel .upper .wrapper {
position:relative !important;
display:grid !important;
grid-template-columns:
40px minmax(0,1fr) !important;
align-items:center !important;
gap:8px !important;
width:100% !important;
padding:8px 10px !important;
}
/*
* Search icon
*/
.ar15-mobile-search-toggle {
grid-column:1 !important;
grid-row:1 !important;
display:flex !important;
align-items:center;
justify-content:center;
width:38px;
height:38px;
margin:0;
padding:0;
border:1px solid #4a5255;
border-radius:50%;
background:#15191b;
color:#d8c89c;
font-size:24px;
line-height:1;
cursor:pointer;
box-shadow:
0 2px 5px rgba(0,0,0,.25);
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease;
}
.ar15-mobile-search-toggle:hover,
.ar15-mobile-search-toggle.ar15-search-active {
background:#252b2e;
border-color:#b6a27d;
color:#fff;
box-shadow:
0 0 9px rgba(182,162,125,.28);
}
/*
* Welcome section now gets most of the row
*/
.ar15-welcome-user {
grid-column:2 !important;
grid-row:1 !important;
display:flex !important;
align-items:center !important;
width:100% !important;
min-width:0 !important;
gap:7px !important;
margin:0 !important;
padding-right:55px !important;
font-size:11px !important;
line-height:1.3 !important;
}
.ar15-mini-avatar {
width:28px !important;
height:28px !important;
flex:0 0 28px !important;
margin:0 !important;
}
/*
* Logout remains on far right
*/
.ar15-welcome-user .logout {
position:absolute !important;
right:10px !important;
top:50% !important;
transform:translateY(-50%) !important;
margin:0 !important;
padding:3px 6px !important;
font-size:9px !important;
line-height:1.1 !important;
}
/*
* Search form is completely hidden until button is tapped
*/
.ar15-quicksearch-panel {
display:none !important;
grid-column:1 / -1 !important;
grid-row:2 !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
}
.ar15-quicksearch-panel.ar15-search-open {
display:block !important;
margin-top:5px !important;
padding:8px !important;
background:#101314;
border:1px solid #394044;
border-radius:5px;
}
/*
* Normalize whatever markup MyBB's {$quicksearch}
* template produces
*/
.ar15-quicksearch-panel form {
display:grid !important;
grid-template-columns:
minmax(0,1fr) auto !important;
gap:6px !important;
width:100% !important;
margin:0 !important;
float:none !important;
}
.ar15-quicksearch-panel input.textbox,
.ar15-quicksearch-panel input[type="text"] {
width:100% !important;
min-width:0 !important;
margin:0 !important;
}
.ar15-quicksearch-panel input.button,
.ar15-quicksearch-panel button {
width:auto !important;
margin:0 !important;
white-space:nowrap;
}
}
/* =========================================================
LIGHT THEME — MOBILE SEARCH
========================================================= */
@media screen and (max-width:760px) {
html[data-ar-theme="light"]
.ar15-mobile-search-toggle {
background:#efede7;
border-color:#aaa9a1;
color:#59634e;
}
html[data-ar-theme="light"]
.ar15-mobile-search-toggle:hover,
html[data-ar-theme="light"]
.ar15-mobile-search-toggle.ar15-search-active {
background:#ffffff;
border-color:#8a7855;
color:#85212a;
box-shadow:
0 0 9px rgba(138,120,85,.28);
}
html[data-ar-theme="light"]
.ar15-quicksearch-panel.ar15-search-open {
background:#f2f0e9;
border-color:#bbb9b0;
}
}
/* =========================================================
MOBILE MEMBER ROW — AVATAR ONLY
========================================================= */
@media screen and (max-width:760px) {
.ar15-welcome-user {
display:flex !important;
align-items:center !important;
min-width:36px !important;
width:auto !important;
gap:0 !important;
padding-right:52px !important;
font-size:0 !important;
}
.ar15-profile-avatar {
display:flex !important;
width:30px !important;
height:30px !important;
flex:0 0 30px !important;
margin:0 !important;
text-decoration:none !important;
}
.ar15-profile-avatar img {
width:100% !important;
height:100% !important;
object-fit:cover !important;
}
.ar15-welcome-user .logout {
position:absolute !important;
right:10px !important;
top:50% !important;
transform:translateY(-50%) !important;
margin:0 !important;
padding:3px 6px !important;
font-size:9px !important;
line-height:1.1 !important;
}
}
@media screen and (max-width:760px) {
.ar15-welcome-user {
display:flex !important;
align-items:center !important;
gap:8px !important;
width:100% !important;
min-width:0 !important;
padding-right:54px !important;
font-size:11px !important;
}
.ar15-profile-avatar {
flex:0 0 30px !important;
width:30px !important;
height:30px !important;
margin:0 !important;
}
.ar15-lastvisit {
display:block !important;
min-width:0 !important;
color:var(--ar-muted) !important;
font-size:10px !important;
line-height:1.25 !important;
white-space:normal !important;
}
.ar15-welcome-user .logout {
position:absolute !important;
right:10px !important;
top:50% !important;
transform:translateY(-50%) !important;
margin:0 !important;
padding:3px 6px !important;
font-size:9px !important;
}
}
/* =========================================================
MEMBER PROFILE AVATAR — PRESERVE ASPECT RATIO
========================================================= */
@media screen and (max-width:760px) {
.profile_avatar img,
.member_profile_avatar img,
#member_profile img.avatar,
td img.avatar {
width:auto !important;
height:auto !important;
max-width:140px !important;
max-height:140px !important;
object-fit:contain !important;
}
}
/* =========================================================
MEMBER PROFILE — AVATAR ASPECT RATIO FIX
========================================================= */
.ar15-member-profile-avatar img {
width:auto !important;
height:auto !important;
max-width:140px !important;
max-height:140px !important;
object-fit:contain !important;
display:inline-block !important;
}
/* Mobile */
@media screen and (max-width:760px) {
.ar15-member-profile-avatar {
width:34% !important;
padding-left:10px !important;
text-align:right !important;
}
.ar15-member-profile-avatar img {
width:auto !important;
height:auto !important;
max-width:110px !important;
max-height:110px !important;
object-fit:contain !important;
}
}