/* eXtreme Club 1.1.0 responsive override layer. Curve2 responsive.css is loaded by SMF first. */
/* Keep the stock Curve2 responsive rules, then apply tiny eXtreme adjustments. */
@media (max-width: 720px) {
.extreme_theme_toggle {
display: block !important;
}
}
/* eXtreme Club 1.0.5: inline mobile main menu ----------------------------- */
@media (max-width: 560px) {
/* Keep the trigger where Curve2 puts it, but make it a disclosure bar. */
a.mobile_user_menu {
display: flex !important;
align-items: center !important;
gap: 7px !important;
margin: 6px 0 5px !important;
padding: 7px 8px !important;
color: var(--ex-text-soft) !important;
background: transparent !important;
border: 0 !important;
border-radius: 5px !important;
text-decoration: none !important;
}
a.mobile_user_menu:hover,
a.mobile_user_menu:focus,
a.mobile_user_menu.extreme-menu-open {
background: var(--ex-surface-raised) !important;
color: var(--ex-text) !important;
}
/* Undo Curve2's full-screen fixed modal. The menu now occupies normal
document flow directly below "Главное меню". */
#main_menu {
position: static !important;
margin: 0 !important;
width: 100% !important;
}
#main_menu #mobile_user_menu.popup_container {
display: none;
position: static !important;
inset: auto !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
background: transparent !important;
z-index: auto !important;
}
#main_menu #mobile_user_menu.popup_container.extreme-inline-open {
display: block !important;
}
#main_menu #mobile_user_menu .popup_window {
position: static !important;
inset: auto !important;
top: auto !important;
left: auto !important;
width: 100% !important;
max-width: none !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 0 8px !important;
padding: 0 !important;
overflow: visible !important;
background: var(--ex-surface-raised) !important;
border: 1px solid var(--ex-border) !important;
border-radius: 7px !important;
box-shadow: var(--ex-shadow-small) !important;
}
#main_menu #mobile_user_menu .popup_heading {
display: none !important;
}
#main_menu #mobile_user_menu .dropmenu {
display: block !important;
position: static !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
#main_menu #mobile_user_menu .dropmenu > li {
float: none !important;
display: block !important;
width: 100% !important;
margin: 0 !important;
border-bottom: 1px solid var(--ex-border) !important;
}
#main_menu #mobile_user_menu .dropmenu > li:last-child {
border-bottom: 0 !important;
}
#main_menu #mobile_user_menu .dropmenu > li > a {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 10px 12px !important;
text-indent: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--ex-text) !important;
}
#main_menu #mobile_user_menu .dropmenu > li > a:hover,
#main_menu #mobile_user_menu .dropmenu > li > a:focus {
background: var(--ex-hover) !important;
color: var(--ex-text) !important;
}
#main_menu #mobile_user_menu .dropmenu > li > a.active {
background: color-mix(in srgb, var(--ex-accent) 16%, transparent) !important;
color: var(--ex-text) !important;
border-left: 3px solid var(--ex-accent) !important;
padding-left: 9px !important;
}
/* Nested sections remain inline as well instead of becoming detached
floating panels. Curve2 can still show them when a section is opened. */
#main_menu #mobile_user_menu .dropmenu li ul,
#main_menu #mobile_user_menu .dropmenu li li ul {
position: static !important;
left: auto !important;
right: auto !important;
top: auto !important;
width: 100% !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: var(--ex-surface) !important;
}
}
/* eXtreme Club 1.0.6: keep submenu chevrons next to their labels --------- */
@media (max-width: 560px) {
#main_menu #mobile_user_menu .dropmenu li.subsections > a::after {
position: static !important;
float: none !important;
display: inline-block !important;
width: auto !important;
height: auto !important;
margin: 0 0 0 8px !important;
padding: 0 !important;
right: auto !important;
top: auto !important;
line-height: 1 !important;
vertical-align: middle !important;
color: var(--ex-muted) !important;
font-family: inherit !important;
font-size: .72em !important;
text-indent: 0 !important;
content: "\25BC" !important;
}
/* Admin is a direct destination in eXtreme Club, so it must never show a
disclosure arrow or reserve space for one on mobile. */
#main_menu #mobile_user_menu .dropmenu li.extreme-admin-direct > a::after {
content: none !important;
display: none !important;
}
}
/* ==========================================================================
eXtreme Club 1.0.9: mobile forum/topic redesign
========================================================================== */
@media (max-width: 720px) {
/* Mobile pages should read as a sequence of deliberate cards rather than a
squeezed desktop table. Keep the established 12px outer gutter. */
html.extreme-page-board #display_head,
html.extreme-page-topic #display_head {
margin: 0 0 12px !important;
padding: 14px 16px !important;
background: var(--ex-surface) !important;
border: 1px solid var(--ex-border) !important;
border-radius: 10px !important;
box-shadow: var(--ex-shadow-small) !important;
}
html.extreme-page-board #display_head .display_title,
html.extreme-page-topic #display_head .display_title {
margin: 0 !important;
padding: 0 !important;
color: var(--ex-text) !important;
font-size: 1.55rem !important;
line-height: 1.18 !important;
font-weight: 650 !important;
letter-spacing: -.02em !important;
}
html.extreme-page-board #display_head p,
html.extreme-page-topic #display_head p {
margin: 6px 0 0 !important;
color: var(--ex-muted) !important;
font-size: .88rem !important;
line-height: 1.4 !important;
}
/* Pagination/action strip: compact, touchable and not louder than content. */
html.extreme-page-board .pagesection,
html.extreme-page-topic .pagesection {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
padding: 0 !important;
overflow: visible !important;
}
html.extreme-page-board .pagesection .pagelinks,
html.extreme-page-topic .pagesection .pagelinks {
float: none !important;
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
margin: 0 !important;
}
html.extreme-page-board .pagesection .pagelinks > .button,
html.extreme-page-topic .pagesection .pagelinks > .button {
width: auto !important;
min-width: 0 !important;
height: 34px !important;
min-height: 34px !important;
line-height: 32px !important;
padding: 0 10px !important;
margin: 0 5px 0 0 !important;
border-radius: 7px !important;
font-size: .78rem !important;
font-weight: 500 !important;
text-transform: none !important;
}
html.extreme-page-board .pagesection .mobile_buttons,
html.extreme-page-topic .pagesection .mobile_buttons {
float: none !important;
display: flex !important;
gap: 6px !important;
margin: 0 0 0 auto !important;
}
html.extreme-page-board .pagesection .mobile_buttons .button,
html.extreme-page-topic .pagesection .mobile_buttons .button {
width: auto !important;
min-width: 0 !important;
min-height: 34px !important;
height: 34px !important;
line-height: 32px !important;
padding: 0 10px !important;
margin: 0 !important;
border-radius: 7px !important;
font-size: .76rem !important;
font-weight: 500 !important;
text-transform: none !important;
letter-spacing: 0 !important;
white-space: nowrap !important;
}
/* Board / topic listing ------------------------------------------------ */
html.extreme-page-board #topic_container > div {
position: relative !important;
background-image: none !important;
color: var(--ex-text) !important;
}
html.extreme-page-board #topic_container > div:hover {
background: var(--ex-hover) !important;
}
html.extreme-page-board #topic_container .board_icon {
overflow: visible !important;
}
html.extreme-page-board #topic_container .board_icon .main_icons.profile_sm {
position: absolute !important;
transform-origin: center !important;
}
html.extreme-page-board #topic_container .message_index_title a:hover,
html.extreme-page-board #topic_container .message_index_title a:focus {
color: var(--ex-accent) !important;
}
html.extreme-page-board #topic_container .topic_pages {
float: none !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 3px !important;
vertical-align: middle !important;
}
html.extreme-page-board #topic_container .topic_pages a,
html.extreme-page-board #topic_container .topic_pages a:visited {
display: inline !important;
padding: 0 2px !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
color: var(--ex-link) !important;
font-weight: 500 !important;
text-decoration: none !important;
}
html.extreme-page-board #topic_container .moderation {
display: none !important;
}
html.extreme-page-board #topic_container .new_posts,
html.extreme-page-board #topic_container a.new_posts {
top: 0 !important;
margin: 0 6px 0 0 !important;
padding: 1px 5px !important;
background: color-mix(in srgb, var(--ex-accent) 18%, var(--ex-surface)) !important;
color: var(--ex-accent) !important;
border: 1px solid color-mix(in srgb, var(--ex-accent) 42%, transparent) !important;
border-radius: 5px !important;
font: 600 .66rem/1.45 "Segoe UI", Arial, sans-serif !important;
opacity: 1 !important;
}
/* Topic / post view ---------------------------------------------------- */
html.extreme-page-topic #forumposts,
html.extreme-page-topic #forumposts form {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
html.extreme-page-topic #forumposts form > .windowbg,
html.extreme-page-topic #forumposts form > .windowbg2,
html.extreme-page-topic #forumposts form > .windowbg3 {
margin: 0 0 12px !important;
padding: 0 !important;
overflow: hidden !important;
background: var(--ex-surface) !important;
border: 1px solid var(--ex-border) !important;
border-radius: 11px !important;
box-shadow: var(--ex-shadow-small) !important;
}
html.extreme-page-topic #forumposts .post_wrapper {
display: block !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
}
html.extreme-page-topic #forumposts .poster {
position: relative !important;
float: none !important;
display: block !important;
width: 100% !important;
min-height: 70px !important;
margin: 0 !important;
padding: 12px 14px 11px 72px !important;
background: var(--ex-surface-raised) !important;
border: 0 !important;
border-bottom: 1px solid var(--ex-border) !important;
text-align: left !important;
}
html.extreme-page-topic #forumposts .poster h4 {
display: block !important;
margin: 0 !important;
padding: 0 !important;
color: var(--ex-text) !important;
font-size: 1rem !important;
line-height: 1.3 !important;
font-weight: 700 !important;
}
html.extreme-page-topic #forumposts .poster h4 a,
html.extreme-page-topic #forumposts .poster h4 a:visited {
color: var(--ex-text) !important;
text-decoration: none !important;
}
html.extreme-page-topic #forumposts .poster .user_info {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 2px 8px !important;
margin: 3px 0 0 !important;
padding: 0 !important;
line-height: 1.25 !important;
}
html.extreme-page-topic #forumposts .poster .user_info li {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
html.extreme-page-topic #forumposts .poster .user_info li.title,
html.extreme-page-topic #forumposts .poster .user_info li.membergroup {
display: inline-block !important;
color: var(--ex-muted) !important;
font-size: .78rem !important;
font-weight: 500 !important;
}
html.extreme-page-topic #forumposts .poster .user_info li.title::before,
html.extreme-page-topic #forumposts .poster .user_info li.membergroup::before {
content: none !important;
}
html.extreme-page-topic #forumposts .poster .user_info li.avatar {
position: absolute !important;
left: 14px !important;
top: 12px !important;
display: block !important;
width: 46px !important;
height: 46px !important;
}
html.extreme-page-topic #forumposts .poster .avatar a {
display: block !important;
width: 46px !important;
height: 46px !important;
}
html.extreme-page-topic #forumposts .poster .avatar img {
display: block !important;
width: 46px !important;
height: 46px !important;
max-width: 46px !important;
max-height: 46px !important;
object-fit: cover !important;
margin: 0 !important;
border: 1px solid var(--ex-border-strong) !important;
border-radius: 10px !important;
background: var(--ex-surface-soft) !important;
box-shadow: none !important;
}
html.extreme-page-topic #forumposts .postarea {
float: none !important;
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: var(--ex-surface) !important;
}
html.extreme-page-topic #forumposts .keyinfo {
margin: 0 !important;
background: transparent !important;
}
html.extreme-page-topic #forumposts .subject_title {
display: none !important;
}
html.extreme-page-topic #forumposts .postinfo {
display: flex !important;
align-items: center !important;
gap: 6px !important;
min-height: 24px !important;
color: var(--ex-muted) !important;
font-size: .78rem !important;
line-height: 1.3 !important;
}
html.extreme-page-topic #forumposts .postinfo .messageicon {
display: none !important;
}
html.extreme-page-topic #forumposts .postinfo a.smalltext,
html.extreme-page-topic #forumposts .postinfo a.smalltext:visited {
color: var(--ex-muted) !important;
font-size: inherit !important;
text-decoration: none !important;
}
html.extreme-page-topic #forumposts .page_number {
color: var(--ex-muted) !important;
opacity: .75 !important;
font-size: .76rem !important;
}
html.extreme-page-topic #forumposts .post {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
}
html.extreme-page-topic #forumposts .post .inner {
margin: 0 !important;
color: var(--ex-text) !important;
font-size: 1rem !important;
line-height: 1.62 !important;
overflow-wrap: anywhere !important;
}
html.extreme-page-topic #forumposts .post .inner p,
html.extreme-page-topic #forumposts .post .inner ul,
html.extreme-page-topic #forumposts .post .inner ol {
margin-bottom: .8em !important;
}
html.extreme-page-topic #forumposts .post .inner img,
html.extreme-page-topic #forumposts .post .inner video,
html.extreme-page-topic #forumposts .post .inner iframe {
max-width: 100% !important;
height: auto;
}
html.extreme-page-topic #forumposts .under_message {
margin: 0 !important;
background: transparent !important;
}
html.extreme-page-topic #forumposts .quickbuttons {
float: none !important;
}
html.extreme-page-topic #forumposts .quickbuttons li {
float: none !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
html.extreme-page-topic #forumposts .quickbuttons li > a,
html.extreme-page-topic #forumposts .quickbuttons li > span {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
margin: 0 !important;
text-shadow: none !important;
text-decoration: none !important;
}
html.extreme-page-topic #forumposts .quickbuttons li > a:hover,
html.extreme-page-topic #forumposts .quickbuttons li > a:focus {
border-color: var(--ex-border-strong) !important;
}
html.extreme-page-topic #forumposts .moderatorbar {
margin: 0 !important;
padding: 0 12px 10px !important;
background: transparent !important;
border: 0 !important;
}
html.extreme-page-topic #forumposts .signature {
margin: 8px 0 0 !important;
padding: 9px 0 0 !important;
border-top: 1px solid var(--ex-border) !important;
color: var(--ex-muted) !important;
font-size: .82rem !important;
}
html.extreme-page-topic #forumposts .post_separator {
display: none !important;
}
/* Quotes/code must not create horizontal scrolling inside a post card. */
html.extreme-page-topic #forumposts blockquote,
html.extreme-page-topic #forumposts .bbc_code,
html.extreme-page-topic #forumposts .phpcode {
max-width: 100% !important;
margin: 8px 0 !important;
overflow-x: auto !important;
border-radius: 7px !important;
}
/* Quick reply should visually belong to the same system of cards. */
html.extreme-page-topic #quickreply {
margin-top: 14px !important;
}
html.extreme-page-topic #quickreply .roundframe {
padding: 10px !important;
border-radius: 0 0 10px 10px !important;
}
}
@media (max-width: 420px) {
html.extreme-page-board #display_head .display_title,
html.extreme-page-topic #display_head .display_title {
font-size: 1.4rem !important;
}
html.extreme-page-board #topic_container > div {
column-gap: 9px !important;
padding: 10px !important;
}
html.extreme-page-board #topic_container .board_icon {
height: 38px !important;
border-radius: 10px !important;
}
html.extreme-page-topic #forumposts .poster {
padding-left: 66px !important;
}
html.extreme-page-topic #forumposts .poster .user_info li.avatar,
html.extreme-page-topic #forumposts .poster .avatar a,
html.extreme-page-topic #forumposts .poster .avatar img {
width: 42px !important;
height: 42px !important;
max-width: 42px !important;
max-height: 42px !important;
}
}
/* ==========================================================================
eXtreme Club 1.0.10: calmer mobile forum UX
========================================================================== */
@media (max-width: 720px) {
/* Board pagination: numbers only. Up/down controls duplicate browser scroll
and consume valuable horizontal space on phones. */
html.extreme-page-board .pagesection .pagelinks > .button,
html.extreme-page-topic .pagesection .pagelinks > .button {
display: none !important;
}
html.extreme-page-board .pagesection,
html.extreme-page-topic .pagesection {
min-height: 38px !important;
gap: 8px !important;
margin: 8px 0 12px !important;
}
html.extreme-page-board .pagesection .pagelinks,
html.extreme-page-topic .pagesection .pagelinks {
min-width: 0 !important;
gap: 3px !important;
color: var(--ex-muted) !important;
}
html.extreme-page-board .pagesection .pages,
html.extreme-page-topic .pagesection .pages {
margin-left: 0 !important;
font-size: .78rem !important;
color: var(--ex-muted) !important;
}
html.extreme-page-board .pagesection .mobile_buttons.extreme-actions-hidden,
html.extreme-page-topic .pagesection .mobile_buttons.extreme-actions-hidden {
display: none !important;
}
/* One obvious creation action instead of the vague "User actions" popup. */
html.extreme-page-board .extreme-new-topic,
html.extreme-page-topic .extreme-reply-topic {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
min-width: 0 !important;
height: 36px !important;
min-height: 36px !important;
padding: 0 13px !important;
margin: 0 !important;
background: var(--ex-accent) !important;
background-image: none !important;
color: var(--ex-accent-text) !important;
border: 1px solid var(--ex-accent-border) !important;
border-radius: 8px !important;
box-shadow: none !important;
text-shadow: none !important;
font-size: .79rem !important;
line-height: 34px !important;
font-weight: 650 !important;
text-decoration: none !important;
white-space: nowrap !important;
}
html.extreme-page-board .extreme-new-topic:hover,
html.extreme-page-board .extreme-new-topic:focus,
html.extreme-page-topic .extreme-reply-topic:hover,
html.extreme-page-topic .extreme-reply-topic:focus {
background: var(--ex-accent-hover) !important;
border-color: var(--ex-accent-border) !important;
filter: none !important;
color: var(--ex-accent-text) !important;
}
html.extreme-page-topic .extreme-topic-more {
width: 38px !important;
min-width: 38px !important;
height: 36px !important;
min-height: 36px !important;
padding: 0 !important;
font-size: 1rem !important;
letter-spacing: 1px !important;
color: var(--ex-muted) !important;
background: transparent !important;
border-color: var(--ex-border) !important;
}
/* Topic list: use the whole card width. The previous version stacked all
metadata beneath the title in one narrow column, leaving a large empty
area at the right. Now title + starter occupy the main row and statistics
/ last activity share a calm footer row. */
html.extreme-page-board #topic_container .board_icon {
margin-top: 1px !important;
opacity: .86 !important;
}
html.extreme-page-board #topic_container .board_stats {
align-self: end !important;
}
html.extreme-page-board #topic_container .lastpost {
align-self: end !important;
justify-self: end !important;
}
/* Post cards: keep author metadata clean on mobile and make the action bar
look like modern quiet text actions rather than a stack of glossy buttons. */
/* SMF 2.1 wraps the online/offline span in an when PMs are allowed,
so scope this to h4 descendants rather than relying on a direct child. */
html.extreme-page-topic #forumposts .poster h4 .on,
html.extreme-page-topic #forumposts .poster h4 .off {
display: none !important;
}
/* Curve2 responsive.css adds a separator to every .user_info li::before.
Our mobile layout re-enables li.avatar as an absolutely-positioned block,
so that separator becomes the stray dot above the avatar. Neutralize only
the avatar pseudo-element; other SMF lists and separators stay untouched. */
html.extreme-page-topic #forumposts .poster .user_info > li.avatar::before {
content: none !important;
display: none !important;
padding: 0 !important;
}
html.extreme-page-topic #forumposts .post .inner {
min-height: 0 !important;
padding: 12px 14px 13px !important;
}
html.extreme-page-topic #forumposts .keyinfo {
padding: 7px 14px 0 !important;
border: 0 !important;
box-shadow: none !important;
}
html.extreme-page-topic #forumposts .postinfo {
padding-bottom: 7px !important;
border-bottom: 1px solid var(--ex-border) !important;
}
html.extreme-page-topic #forumposts .under_message {
padding: 0 10px 10px !important;
}
html.extreme-page-topic #forumposts .quickbuttons {
margin: 0 !important;
padding: 7px 0 0 !important;
border-top: 1px solid var(--ex-border) !important;
overflow: visible !important;
}
html.extreme-page-topic #forumposts .quickbuttons li {
flex: 0 0 auto !important;
min-width: 0 !important;
}
html.extreme-page-topic #forumposts .quickbuttons li.extreme-selected-quote-action {
display: none !important;
}
html.extreme-page-topic #forumposts .quickbuttons li.extreme-selected-quote-action.extreme-selection-active {
display: block !important;
}
html.extreme-page-topic #forumposts .quickbuttons li > a,
html.extreme-page-topic #forumposts .quickbuttons li > span {
min-width: 0 !important;
min-height: 30px !important;
height: 30px !important;
padding: 0 8px !important;
background: transparent !important;
background-image: none !important;
color: var(--ex-muted) !important;
border: 0 !important;
border-radius: 6px !important;
box-shadow: none !important;
font-size: .74rem !important;
line-height: 30px !important;
font-weight: 550 !important;
white-space: nowrap !important;
}
html.extreme-page-topic #forumposts .quickbuttons li > a:hover,
html.extreme-page-topic #forumposts .quickbuttons li > a:focus {
background: var(--ex-hover) !important;
color: var(--ex-text) !important;
border: 0 !important;
}
html.extreme-page-topic #forumposts .quickbuttons .main_icons {
transform: scale(.78) !important;
transform-origin: center !important;
opacity: .7 !important;
margin-right: 2px !important;
}
}
@media (max-width: 480px) {
/* Keep the topic card balanced even on narrow phones. Do not collapse all
metadata into the left column: title uses the full top row, while stats
and last activity form a quiet two-sided footer. */
html.extreme-page-board #topic_container > div {
grid-template-columns: 38px minmax(0, 1fr) minmax(92px, auto) !important;
grid-template-areas:
"topicicon topicinfo topicinfo"
"topicicon topicstats topiclast" !important;
column-gap: 10px !important;
row-gap: 7px !important;
padding: 11px !important;
}
html.extreme-page-board #topic_container .info,
html.extreme-page-board #topic_container .info.info_block {
width: 100% !important;
max-width: none !important;
padding-right: 22px !important;
}
html.extreme-page-board #topic_container .board_stats {
align-self: end !important;
justify-self: start !important;
width: 100% !important;
min-width: 0 !important;
padding: 0 !important;
text-align: left !important;
}
html.extreme-page-board #topic_container .board_stats p {
font-size: .70rem !important;
line-height: 1.28 !important;
text-align: left !important;
}
html.extreme-page-board #topic_container .lastpost {
align-self: end !important;
justify-self: end !important;
width: auto !important;
max-width: 122px !important;
margin: 0 !important;
padding: 0 !important;
border-top: 0 !important;
text-align: right !important;
}
html.extreme-page-board #topic_container .lastpost p {
font-size: .70rem !important;
line-height: 1.28 !important;
text-align: right !important;
}
html.extreme-page-board #topic_container .lastpost a,
html.extreme-page-board #topic_container .lastpost a:visited {
white-space: nowrap !important;
}
html.extreme-page-topic #forumposts .quickbuttons li > a,
html.extreme-page-topic #forumposts .quickbuttons li > span {
padding: 0 6px !important;
font-size: .71rem !important;
}
}
/* ==========================================================================
1.0.13 final mobile post-action reset
Keep this after all media queries: it intentionally wins over both Curve
and earlier responsive experiments.
========================================================================== */
@media (max-width: 720px) {
html.extreme-page-topic #forumposts .quickbuttons,
html.extreme-page-topic #forumposts .quickbuttons > li,
html.extreme-page-topic #forumposts .quickbuttons > li:hover,
html.extreme-page-topic #forumposts .quickbuttons > li:focus-within {
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
}
html.extreme-page-topic #forumposts .quickbuttons {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
flex-wrap: wrap !important;
gap: 5px !important;
padding-top: 8px !important;
}
html.extreme-page-topic #forumposts .quickbuttons > li {
float: none !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
}
html.extreme-page-topic #forumposts .quickbuttons > li:first-child > a,
html.extreme-page-topic #forumposts .quickbuttons > li:last-child > a,
html.extreme-page-topic #forumposts .quickbuttons > li:only-child > a,
html.extreme-page-topic #forumposts .quickbuttons > li > a,
html.extreme-page-topic #forumposts .quickbuttons > li > span {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 0 !important;
width: auto !important;
height: 32px !important;
min-height: 32px !important;
margin: 0 !important;
padding: 0 9px !important;
background: transparent !important;
background-image: none !important;
color: var(--ex-muted) !important;
border: 1px solid transparent !important;
border-radius: 6px !important;
box-shadow: none !important;
text-shadow: none !important;
font-size: .76rem !important;
font-weight: 600 !important;
line-height: 30px !important;
white-space: nowrap !important;
overflow: hidden !important;
}
html.extreme-page-topic #forumposts .quickbuttons > li:hover > a,
html.extreme-page-topic #forumposts .quickbuttons > li > a:hover,
html.extreme-page-topic #forumposts .quickbuttons > li > a:focus {
background: var(--ex-hover) !important;
background-image: none !important;
color: var(--ex-text) !important;
border-color: var(--ex-border) !important;
box-shadow: none !important;
}
}
/* ==========================================================================
1.0.17 final mobile discussion-list layout
Metadata is full-width below the title row instead of being squeezed into
a narrow left-hand stack. This block intentionally comes last.
========================================================================== */
@media (max-width: 720px) {
html.extreme-page-board #topic_header {
display: none !important;
}
html.extreme-page-board #topic_container > div:hover,
html.extreme-page-board #topic_container > div:focus-within {
border-color: var(--ex-border-strong) !important;
}
html.extreme-page-board #topic_container .board_icon {
float: none !important;
margin: 0 !important;
border-radius: 0 !important;
}
html.extreme-page-board #topic_container .board_icon .main_icons.profile_sm {
right: 2px !important;
bottom: 7px !important;
transform: scale(.7) !important;
}
html.extreme-page-board #topic_container .info,
html.extreme-page-board #topic_container .info.info_block {
float: none !important;
align-items: center !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
text-align: left !important;
}
html.extreme-page-board #topic_container .message_index_title {
display: block !important;
width: 100% !important;
text-align: left !important;
}
html.extreme-page-board #topic_container .message_index_title a:active,
html.extreme-page-board #topic_container .message_index_title a:focus {
color: var(--ex-accent-ink) !important;
}
html.extreme-page-board #topic_container .info > div > p.floatleft {
display: block !important;
padding: 0 !important;
}
html.extreme-page-board #topic_container .info > div > p.floatleft a,
html.extreme-page-board #topic_container .info > div > p.floatleft a:visited {
color: var(--ex-text-soft) !important;
font-weight: 550 !important;
text-decoration: none !important;
}
html.extreme-page-board #topic_container .topic_pages {
display: inline-flex !important;
margin: 5px 0 0 !important;
}
html.extreme-page-board #topic_container .board_stats {
float: none !important;
margin: 0 !important;
border-top: 1px solid var(--ex-border) !important;
}
html.extreme-page-board #topic_container .lastpost {
float: none !important;
max-width: none !important;
min-height: 0 !important;
margin: 0 !important;
border-top: 1px solid var(--ex-border) !important;
}
html.extreme-page-board #topic_container .lastpost p {
padding: 0 !important;
}
html.extreme-page-board #topic_container .lastpost a,
html.extreme-page-board #topic_container .lastpost a:visited {
color: var(--ex-text-soft) !important;
text-decoration: none !important;
}
html.extreme-page-board #topic_container .lastpost a:last-child {
color: var(--ex-link) !important;
}
}
@media (max-width: 420px) {
html.extreme-page-board #topic_container .info,
html.extreme-page-board #topic_container .info.info_block {
padding-right: 28px !important;
}
}
/* ==========================================================================
1.0.23 final mobile pass: one-line toolbar, downward popups, unified topics
========================================================================== */
@media (max-width: 720px) {
/* Keep the whole top toolbar on one line. */
#top_section .inner_wrap {
position: relative !important;
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 7px !important;
min-height: 56px !important;
padding: 7px 10px !important;
overflow: visible !important;
}
#top_info {
order: 1 !important;
display: inline-flex !important;
align-items: center !important;
flex: 0 1 auto !important;
width: auto !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
gap: 7px !important;
}
#top_info > li {
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
}
#profile_menu_top .textmenu,
#pm_menu_top .textmenu,
#alerts_menu_top .textmenu {
display: none !important;
}
/* Search is a single icon until opened. When opened it grows LEFTWARD
across the toolbar while the language/theme controls remain visible. */
#top_section .extreme-search-form {
order: 20 !important;
position: relative !important;
flex: 0 0 40px !important;
width: 40px !important;
min-width: 40px !important;
height: 40px !important;
margin: 0 0 0 auto !important;
padding: 0 !important;
overflow: visible !important;
background: transparent !important;
border: 0 !important;
z-index: 131 !important;
}
#top_section .extreme-search-form .extreme-search-input,
#top_section .extreme-search-form input[name="search"] {
display: block !important;
width: 0 !important;
min-width: 0 !important;
height: 40px !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
border: 0 !important;
background: var(--ex-input) !important;
box-shadow: none !important;
}
#top_section .extreme-search-form .extreme-search-submit,
#top_section .extreme-search-form input[type="submit"] {
position: absolute !important;
top: 0 !important;
right: 0 !important;
width: 40px !important;
min-width: 40px !important;
height: 40px !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid var(--ex-border-strong) !important;
border-radius: 50% !important;
background-color: var(--ex-surface-raised) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2395a6b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='20' y1='20' x2='16.2' y2='16.2'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 18px 18px !important;
color: transparent !important;
box-shadow: none !important;
}
#top_section .extreme-search-form.extreme-search-open {
position: absolute !important;
left: 10px !important;
right: 126px !important;
top: 8px !important;
width: auto !important;
min-width: 0 !important;
height: 40px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 999px !important;
background: var(--ex-top) !important;
z-index: 150 !important;
}
#top_section .extreme-search-form.extreme-search-open .extreme-search-input,
#top_section .extreme-search-form.extreme-search-open input[name="search"] {
width: 100% !important;
min-width: 0 !important;
height: 40px !important;
padding: 0 48px 0 15px !important;
opacity: 1 !important;
pointer-events: auto !important;
border: 1px solid var(--ex-border-strong) !important;
border-radius: 999px !important;
background: var(--ex-input) !important;
color: var(--ex-input-text) !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--ex-focus) 55%, transparent) !important;
}
/* Language is intentionally compact: RUS / ENG, with a quiet flag. */
#top_section .extreme-language-form {
order: 30 !important;
position: relative !important;
z-index: 132 !important;
flex: 0 0 auto !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: auto !important;
}
#top_section .extreme-language-toggle,
#top_section .extreme-language-choice {
pointer-events: auto !important;
}
#top_section .extreme-language-form select,
#top_section .extreme-language-select {
width: 78px !important;
min-width: 78px !important;
max-width: 78px !important;
height: 40px !important;
padding: 0 24px 0 9px !important;
border-radius: 999px !important;
font-size: .78rem !important;
font-weight: 600 !important;
letter-spacing: .01em !important;
}
.extreme_theme_toggle {
order: 40 !important;
flex: 0 0 34px !important;
width: 34px !important;
min-width: 34px !important;
height: 40px !important;
line-height: 38px !important;
margin: 0 !important;
}
/* Top popups open DOWN from the toolbar and are clamped to the viewport. */
#top_info .top_menu,
#top_info #profile_menu,
#top_info #pm_menu,
#top_info #alerts_menu {
position: fixed !important;
top: 58px !important;
left: 12px !important;
right: 12px !important;
bottom: auto !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
max-height: calc(72vh - 58px) !important;
margin: 0 !important;
padding: 10px !important;
overflow-x: hidden !important;
overflow-y: auto !important;
transform: none !important;
border: 1px solid var(--ex-border-strong) !important;
border-radius: 12px !important;
background: var(--ex-surface-raised) !important;
box-shadow: 0 14px 34px rgba(0,0,0,.34) !important;
z-index: 240 !important;
}
#alerts_menu .alert_bar {
display: grid !important;
grid-template-columns: 1fr auto !important;
gap: 8px 10px !important;
align-items: center !important;
padding: 2px 2px 10px !important;
margin: 0 0 8px !important;
border-bottom: 1px solid var(--ex-border) !important;
}
#alerts_menu .alerts_opts {
display: contents !important;
}
#alerts_menu .alerts_opts > a,
#alerts_menu .alerts_opts > a:visited {
min-height: 34px !important;
padding: 6px 8px !important;
border-radius: 8px !important;
color: var(--ex-text-soft) !important;
background: transparent !important;
text-decoration: none !important;
white-space: nowrap !important;
}
#alerts_menu .alerts_opts > a:first-child {
justify-self: start !important;
}
#alerts_menu .alerts_opts > a.floatright {
float: none !important;
justify-self: end !important;
}
#alerts_menu .alerts_box {
grid-column: 1 / -1 !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
#alerts_menu .alerts_box .button {
display: inline-flex !important;
align-items: center !important;
min-height: 34px !important;
margin: 0 !important;
padding: 6px 10px !important;
border: 1px solid var(--ex-border-strong) !important;
border-radius: 8px !important;
background: var(--ex-surface-soft) !important;
background-image: none !important;
color: var(--ex-text) !important;
box-shadow: none !important;
text-shadow: none !important;
}
/* Alert-page buttons: kill every old Curve corner/gradient layer. */
#alerts .quickbuttons,
#alerts .quickbuttons > li {
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
}
#alerts .quickbuttons > li > a,
#alerts .quickbuttons > li > span {
position: relative !important;
overflow: hidden !important;
min-height: 36px !important;
padding: 6px 10px !important;
border: 1px solid var(--ex-border-strong) !important;
border-radius: 8px !important;
background: var(--ex-surface-raised) !important;
background-image: none !important;
color: var(--ex-text-soft) !important;
box-shadow: none !important;
text-shadow: none !important;
}
#alerts .quickbuttons > li > a::before,
#alerts .quickbuttons > li > a::after,
#alerts .quickbuttons > li > span::before,
#alerts .quickbuttons > li > span::after {
content: none !important;
display: none !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
}
/* Discussion list becomes ONE panel. Topics are rows separated by a line,
instead of a pile of detached cards. */
html.extreme-page-board #messageindex {
margin: 0 !important;
padding: 0 !important;
background: var(--ex-surface) !important;
border: 1px solid var(--ex-border) !important;
box-shadow: var(--ex-shadow-small) !important;
}
html.extreme-page-board #topic_container {
display: block !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: var(--ex-surface) !important;
border: 0 !important;
border-radius: 0 !important;
}
html.extreme-page-board #topic_container > div {
column-gap: 0 !important;
row-gap: 0 !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
html.extreme-page-board #topic_container > div:last-child {
border-bottom: 0 !important;
}
html.extreme-page-board #topic_container > div:hover,
html.extreme-page-board #topic_container > div:focus-within {
background: var(--ex-hover) !important;
}
html.extreme-page-board #topic_container .board_icon {
align-self: stretch !important;
border: 0 !important;
}
/* Breadcrumbs: one baseline, no literal or pseudo legacy arrows. */
.navigate_section > ul,
.navigate_section ul {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 0 !important;
min-height: 38px !important;
padding: 8px 12px !important;
}
.navigate_section > ul > li,
.navigate_section ul li {
display: inline-flex !important;
align-items: center !important;
min-height: 22px !important;
margin: 0 !important;
padding: 0 !important;
font-size: 13px !important;
line-height: 22px !important;
}
.navigate_section > ul > li::before,
.navigate_section ul li::before {
content: none !important;
display: none !important;
}
.navigate_section > ul > li::after,
.navigate_section ul li::after {
content: '›' !important;
display: inline-block !important;
margin: 0 7px !important;
color: var(--ex-muted) !important;
opacity: .65 !important;
line-height: 22px !important;
}
.navigate_section > ul > li:last-child::after,
.navigate_section ul li:last-child::after,
.navigate_section ul li.last::after {
content: none !important;
display: none !important;
}
.navigate_section li > a::before,
.navigate_section li > a::after,
.navigate_section li > span::before,
.navigate_section li > span::after {
content: none !important;
display: none !important;
}
}
@media (max-width: 380px) {
#top_section .inner_wrap {
gap: 5px !important;
padding-left: 7px !important;
padding-right: 7px !important;
}
#top_info {
gap: 5px !important;
}
#top_section .extreme-language-form select,
#top_section .extreme-language-select {
width: 72px !important;
min-width: 72px !important;
max-width: 72px !important;
padding-left: 6px !important;
padding-right: 20px !important;
font-size: .72rem !important;
}
#top_section .extreme-search-form.extreme-search-open {
left: 7px !important;
right: 116px !important;
}
}
/* ==========================================================================
1.0.24 mobile topic list: compact, unified, larger topic icons
========================================================================== */
@media (max-width: 720px) {
/* Keep the list as one clean panel, but make each topic read as one row. */
html.extreme-page-board #messageindex {
border-radius: 14px !important;
overflow: hidden !important;
}
html.extreme-page-board #topic_container > div {
display: grid !important;
align-items: stretch !important;
background: var(--ex-surface) !important;
border-bottom: 1px solid var(--ex-border-strong) !important;
}
html.extreme-page-board #topic_container .board_icon {
grid-area: topicicon !important;
position: relative !important;
display: flex !important;
height: auto !important;
background: color-mix(in srgb, var(--ex-surface-soft) 62%, transparent) !important;
border-right: 1px solid var(--ex-border) !important;
}
html.extreme-page-board #topic_container .board_icon img {
display: block !important;
margin: 0 !important;
opacity: .92 !important;
}
/* The tiny "posted in this topic" person duplicates the author line and
makes the icon column noisy on phones. */
html.extreme-page-board #topic_container .board_icon .main_icons.profile_sm {
display: none !important;
}
html.extreme-page-board #topic_container .info,
html.extreme-page-board #topic_container .info.info_block {
grid-area: topicinfo !important;
display: block !important;
min-width: 0 !important;
background: transparent !important;
border: 0 !important;
}
html.extreme-page-board #topic_container .info > div {
width: 100% !important;
min-width: 0 !important;
}
html.extreme-page-board #topic_container .message_index_title {
font-weight: 700 !important;
}
html.extreme-page-board #topic_container .message_index_title a,
html.extreme-page-board #topic_container .message_index_title a:visited {
display: inline !important;
color: var(--ex-text) !important;
text-decoration: none !important;
}
html.extreme-page-board #topic_container .info > div > p.floatleft {
float: none !important;
margin: 4px 0 0 !important;
color: var(--ex-muted) !important;
}
/* Replies/views and last activity share one compact footer line. */
html.extreme-page-board #topic_container .board_stats {
grid-area: topicstats !important;
display: flex !important;
justify-content: flex-start !important;
min-width: 0 !important;
width: auto !important;
background: transparent !important;
border: 0 !important;
text-align: left !important;
}
html.extreme-page-board #topic_container .board_stats p {
margin: 0 !important;
color: var(--ex-muted) !important;
text-align: left !important;
white-space: nowrap !important;
}
html.extreme-page-board #topic_container .lastpost {
grid-area: topiclast !important;
display: flex !important;
justify-content: flex-end !important;
min-width: 0 !important;
width: auto !important;
background: transparent !important;
border: 0 !important;
text-align: right !important;
}
html.extreme-page-board #topic_container .lastpost p {
margin: 0 !important;
color: var(--ex-muted) !important;
text-align: right !important;
}
html.extreme-page-board #topic_container .lastpost a:first-child {
display: block !important;
color: var(--ex-text-soft) !important;
font-weight: 650 !important;
white-space: nowrap !important;
}
html.extreme-page-board #topic_container .lastpost a:last-child {
font-weight: 550 !important;
}
/* Topic state icons (sticky/locked/poll/etc.) stay close to the title. */
html.extreme-page-board #topic_container .icons.floatright {
vertical-align: middle !important;
opacity: .72 !important;
}
/* Slightly denser layout on very narrow phones. */
@media (max-width: 420px) {
html.extreme-page-board #topic_container > div {
grid-template-columns: 58px minmax(0, 1fr) minmax(104px, auto) !important;
min-height: 88px !important;
}
html.extreme-page-board #topic_container .board_icon {
width: 58px !important;
min-width: 58px !important;
padding-top: 13px !important;
}
html.extreme-page-board #topic_container .board_icon img {
width: 32px !important;
max-width: 32px !important;
height: 32px !important;
max-height: 32px !important;
}
html.extreme-page-board #topic_container .info,
html.extreme-page-board #topic_container .info.info_block {
padding: 10px 11px 5px !important;
}
html.extreme-page-board #topic_container .board_stats {
padding: 5px 5px 9px 11px !important;
}
html.extreme-page-board #topic_container .lastpost {
padding: 5px 11px 9px 5px !important;
}
}
}
/* ==========================================================================
1.0.25 mobile topic density pass: less dead space, tighter hierarchy
========================================================================== */
@media (max-width: 720px) {
/* Board heading: keep it readable, but stop it feeling like a large hero card. */
html.extreme-page-board #display_head {
margin: 0 0 7px !important;
padding: 10px 14px !important;
border-radius: 10px !important;
}
html.extreme-page-board #display_head .display_title {
font-size: 1.36rem !important;
line-height: 1.12 !important;
}
html.extreme-page-board #display_head p {
margin-top: 4px !important;
font-size: .78rem !important;
line-height: 1.25 !important;
}
/* Pagination/action row should be a toolbar, not a second content block. */
html.extreme-page-board .pagesection {
gap: 5px !important;
margin: 4px 0 6px !important;
min-height: 36px !important;
}
html.extreme-page-board .pagesection .pagelinks {
gap: 3px !important;
font-size: .78rem !important;
}
html.extreme-page-board .pagesection .pages {
margin-right: 2px !important;
font-size: .78rem !important;
}
html.extreme-page-board .pagesection .current_page,
html.extreme-page-board .pagesection .nav_page {
min-width: 24px !important;
height: 28px !important;
line-height: 28px !important;
padding: 0 6px !important;
border-radius: 6px !important;
font-size: .76rem !important;
}
html.extreme-page-board .pagesection .button,
html.extreme-page-board .pagesection .mobile_buttons .button {
min-height: 34px !important;
height: 34px !important;
line-height: 32px !important;
padding: 0 11px !important;
border-radius: 8px !important;
font-size: .76rem !important;
}
/* Topic rows: two compact rows inside one unified discussion panel.
Row 1 = icon + title/author. Row 2 = stats left + last activity right. */
html.extreme-page-board #topic_container > div {
grid-template-columns: 58px minmax(0, 1fr) minmax(112px, auto) !important;
grid-template-rows: auto auto !important;
grid-template-areas:
"topicicon topicinfo topicinfo"
"topicicon topicstats topiclast" !important;
align-content: start !important;
min-height: 0 !important;
}
html.extreme-page-board #topic_container .board_icon {
width: 58px !important;
min-width: 58px !important;
min-height: 0 !important;
padding: 8px 0 !important;
align-items: flex-start !important;
justify-content: center !important;
}
html.extreme-page-board #topic_container .board_icon img {
width: 38px !important;
max-width: 38px !important;
height: 38px !important;
max-height: 38px !important;
object-fit: contain !important;
}
html.extreme-page-board #topic_container .info,
html.extreme-page-board #topic_container .info.info_block {
padding: 7px 11px 2px !important;
}
html.extreme-page-board #topic_container .message_index_title {
font-size: .98rem !important;
line-height: 1.15 !important;
letter-spacing: -.01em !important;
}
html.extreme-page-board #topic_container .info > div > p.floatleft {
margin-top: 2px !important;
font-size: .69rem !important;
line-height: 1.18 !important;
}
html.extreme-page-board #topic_container .topic_pages {
margin-top: 2px !important;
font-size: .65rem !important;
}
html.extreme-page-board #topic_container .board_stats {
align-items: flex-start !important;
padding: 2px 5px 7px 11px !important;
}
html.extreme-page-board #topic_container .board_stats p {
font-size: .64rem !important;
line-height: 1.2 !important;
}
html.extreme-page-board #topic_container .lastpost {
align-items: flex-start !important;
padding: 2px 11px 7px 5px !important;
}
html.extreme-page-board #topic_container .lastpost p {
font-size: .65rem !important;
line-height: 1.2 !important;
}
html.extreme-page-board #topic_container .lastpost a:first-child {
margin-bottom: 0 !important;
}
/* Keep status icons close to the title without reserving vertical space. */
}
@media (max-width: 420px) {
html.extreme-page-board #topic_container > div {
grid-template-columns: 52px minmax(0, 1fr) minmax(98px, auto) !important;
}
html.extreme-page-board #topic_container .board_icon {
width: 52px !important;
min-width: 52px !important;
padding: 7px 0 !important;
}
html.extreme-page-board #topic_container .board_icon img {
width: 36px !important;
max-width: 36px !important;
height: 36px !important;
max-height: 36px !important;
}
html.extreme-page-board #topic_container .info,
html.extreme-page-board #topic_container .info.info_block {
padding: 6px 9px 2px !important;
}
html.extreme-page-board #topic_container .board_stats {
padding: 1px 4px 6px 9px !important;
}
html.extreme-page-board #topic_container .lastpost {
padding: 1px 9px 6px 4px !important;
}
}
/* ==========================================================================
1.0.26 mobile topic title alignment: remove the empty status-icon line
========================================================================== */
@media (max-width: 720px) {
/* SMF outputs the status-icons DIV before the topic title even when it is
empty. In inline/static layout that empty DIV still reserves a line,
which is the dead space visible above every topic title. Keep status
icons out of document flow instead. */
html.extreme-page-board #topic_container .info,
html.extreme-page-board #topic_container .info.info_block {
align-self: start !important;
padding-top: 5px !important;
}
html.extreme-page-board #topic_container .info > div {
position: relative !important;
margin: 0 !important;
padding: 0 26px 0 0 !important;
}
html.extreme-page-board #topic_container .icons.floatright {
position: absolute !important;
top: 1px !important;
right: 0 !important;
float: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 3px !important;
width: auto !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
}
html.extreme-page-board #topic_container .icons.floatright:empty {
display: none !important;
}
html.extreme-page-board #topic_container .message_index_title {
margin: 0 !important;
padding: 0 !important;
}
/* Align the enlarged topic icon with the actual title rather than with
the now-removed empty status row. */
html.extreme-page-board #topic_container .board_icon {
padding-top: 5px !important;
}
/* Pull the footer metadata a little closer to the title block too. */
html.extreme-page-board #topic_container .board_stats {
padding-top: 0 !important;
}
html.extreme-page-board #topic_container .lastpost {
padding-top: 0 !important;
}
}
@media (max-width: 420px) {
html.extreme-page-board #topic_container .info,
html.extreme-page-board #topic_container .info.info_block {
padding-top: 4px !important;
}
html.extreme-page-board #topic_container .board_icon {
padding-top: 4px !important;
}
}
/* eXtreme Club 1.0.32: mobile top-bar popups use accordions for nested menus */
@media (max-width: 720px) {
#top_info #profile_menu .dropmenu > li.subsections > a,
#top_info #profile_menu .dropmenu > li.subsections > span > a,
#top_info #pm_menu .dropmenu > li.subsections > a,
#top_info #pm_menu .dropmenu > li.subsections > span > a,
#top_info #alerts_menu .dropmenu > li.subsections > a,
#top_info #alerts_menu .dropmenu > li.subsections > span > a {
position: relative !important;
padding-right: 28px !important;
}
#top_info #profile_menu .dropmenu > li.subsections > a::after,
#top_info #profile_menu .dropmenu > li.subsections > span > a::after,
#top_info #pm_menu .dropmenu > li.subsections > a::after,
#top_info #pm_menu .dropmenu > li.subsections > span > a::after,
#top_info #alerts_menu .dropmenu > li.subsections > a::after,
#top_info #alerts_menu .dropmenu > li.subsections > span > a::after {
content: '▾' !important;
position: absolute !important;
right: 10px !important;
top: 50% !important;
transform: translateY(-50%) !important;
color: var(--ex-text-soft) !important;
font-size: 12px !important;
line-height: 1 !important;
}
#top_info #profile_menu .dropmenu > li.extreme-sub-open > a::after,
#top_info #profile_menu .dropmenu > li.extreme-sub-open > span > a::after,
#top_info #pm_menu .dropmenu > li.extreme-sub-open > a::after,
#top_info #pm_menu .dropmenu > li.extreme-sub-open > span > a::after,
#top_info #alerts_menu .dropmenu > li.extreme-sub-open > a::after,
#top_info #alerts_menu .dropmenu > li.extreme-sub-open > span > a::after {
content: '▴' !important;
}
#top_info #profile_menu .dropmenu li.subsections > ul,
#top_info #pm_menu .dropmenu li.subsections > ul,
#top_info #alerts_menu .dropmenu li.subsections > ul {
display: none !important;
}
#top_info #profile_menu .dropmenu li.subsections.extreme-sub-open > ul,
#top_info #pm_menu .dropmenu li.subsections.extreme-sub-open > ul,
#top_info #alerts_menu .dropmenu li.subsections.extreme-sub-open > ul {
display: block !important;
}
#top_info #profile_menu .dropmenu li ul,
#top_info #pm_menu .dropmenu li ul,
#top_info #alerts_menu .dropmenu li ul {
position: static !important;
float: none !important;
width: 100% !important;
min-width: 0 !important;
margin: 8px 0 0 !important;
padding: 6px 0 0 !important;
border: 0 !important;
border-top: 1px solid var(--ex-border) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
#top_info #profile_menu .dropmenu li ul li,
#top_info #pm_menu .dropmenu li ul li,
#top_info #alerts_menu .dropmenu li ul li {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
#top_info #profile_menu .dropmenu li ul a,
#top_info #pm_menu .dropmenu li ul a,
#top_info #alerts_menu .dropmenu li ul a {
display: block !important;
padding: 9px 0 9px 14px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--ex-text) !important;
box-shadow: none !important;
}
}
/* ==========================================================================
1.0.33: clean mobile generic menus (PM/profile/admin) + true accordions
========================================================================== */
@media (max-width: 720px) {
/* Generic menu trigger must never be a lonely hamburger. */
a[class^="mobile_generic_menu_"].extreme-generic-menu-trigger {
display: inline-flex !important;
align-items: center !important;
gap: 9px !important;
width: auto !important;
max-width: calc(100% - 24px) !important;
min-height: 42px !important;
margin: 8px 12px 10px !important;
padding: 8px 12px !important;
border: 1px solid var(--ex-border) !important;
border-radius: 10px !important;
background: var(--ex-surface-raised) !important;
color: var(--ex-text-soft) !important;
text-decoration: none !important;
box-shadow: none !important;
}
a[class^="mobile_generic_menu_"].extreme-generic-menu-trigger .menu_icon {
flex: 0 0 20px !important;
width: 20px !important;
height: 20px !important;
margin: 0 !important;
background-size: 20px 20px !important;
opacity: .78 !important;
}
a[class^="mobile_generic_menu_"].extreme-generic-menu-trigger .text_menu {
display: block !important;
min-width: 0 !important;
font-size: 15px !important;
line-height: 1.25 !important;
font-weight: 600 !important;
}
a[class^="mobile_generic_menu_"].extreme-generic-menu-trigger:hover,
a[class^="mobile_generic_menu_"].extreme-generic-menu-trigger:focus {
border-color: var(--ex-border-strong) !important;
background: var(--ex-hover) !important;
color: var(--ex-text) !important;
}
/* Remove the dead vertical space around the primary mobile menu. */
#main_menu,
#main_menu > .content_wrapper {
min-height: 0 !important;
height: auto !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
#main_menu a.mobile_user_menu {
min-height: 42px !important;
margin: 4px 0 !important;
padding: 8px 10px !important;
}
#main_menu #mobile_user_menu.popup_container:not(.extreme-inline-open) {
display: none !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Generic popup: compact bottom sheet with a real title. */
.popup_container.extreme-generic-menu-popup .popup_window {
max-height: min(76vh, 680px) !important;
border-radius: 18px !important;
}
.popup_container.extreme-generic-menu-popup .popup_heading {
min-height: 54px !important;
padding: 14px 54px 13px 16px !important;
font-size: 17px !important;
line-height: 26px !important;
}
.popup_container.extreme-generic-menu-popup .generic_menu {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 8px !important;
}
.popup_container.extreme-generic-menu-popup .dropmenu {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.popup_container.extreme-generic-menu-popup .dropmenu > li {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-bottom: 1px solid var(--ex-border) !important;
background: transparent !important;
}
.popup_container.extreme-generic-menu-popup .dropmenu > li:last-child {
border-bottom: 0 !important;
}
.popup_container.extreme-generic-menu-popup .dropmenu > li > a {
position: relative !important;
display: flex !important;
align-items: center !important;
width: 100% !important;
min-height: 50px !important;
margin: 0 !important;
padding: 12px 38px 12px 12px !important;
border: 0 !important;
border-radius: 10px !important;
background: transparent !important;
color: var(--ex-text) !important;
font-size: 15px !important;
line-height: 1.25 !important;
font-weight: 600 !important;
text-indent: 0 !important;
box-shadow: none !important;
}
.popup_container.extreme-generic-menu-popup .dropmenu > li > a.active,
.popup_container.extreme-generic-menu-popup .dropmenu > li > a.chosen {
background: color-mix(in srgb, var(--ex-accent) 10%, transparent) !important;
color: var(--ex-text) !important;
}
.popup_container.extreme-generic-menu-popup .dropmenu > li.subsections > a::after {
content: '▾' !important;
position: absolute !important;
top: 50% !important;
right: 13px !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
transform: translateY(-50%) !important;
color: var(--ex-muted) !important;
font: 12px/1 Arial, sans-serif !important;
text-indent: 0 !important;
}
.popup_container.extreme-generic-menu-popup .dropmenu > li.subsections.extreme-sub-open > a::after {
content: '▴' !important;
}
/* Nested area links stay in document flow. No floating legacy submenu. */
.popup_container.extreme-generic-menu-popup .dropmenu li > ul {
position: static !important;
inset: auto !important;
display: none;
width: 100% !important;
min-width: 0 !important;
margin: 0 0 8px !important;
padding: 4px 0 4px 10px !important;
border: 0 !important;
border-left: 2px solid color-mix(in srgb, var(--ex-accent) 42%, var(--ex-border)) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.popup_container.extreme-generic-menu-popup .dropmenu li.extreme-sub-open > ul {
display: block !important;
}
.popup_container.extreme-generic-menu-popup .dropmenu li > ul > li {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
.popup_container.extreme-generic-menu-popup .dropmenu li > ul > li > a {
display: flex !important;
align-items: center !important;
min-height: 42px !important;
width: 100% !important;
margin: 0 !important;
padding: 9px 12px !important;
border: 0 !important;
border-radius: 8px !important;
background: transparent !important;
color: var(--ex-text-soft) !important;
font-size: 14px !important;
line-height: 1.25 !important;
font-weight: 500 !important;
text-indent: 0 !important;
box-shadow: none !important;
}
.popup_container.extreme-generic-menu-popup .dropmenu li > ul > li > a:hover,
.popup_container.extreme-generic-menu-popup .dropmenu li > ul > li > a:focus,
.popup_container.extreme-generic-menu-popup .dropmenu li > ul > li > a.chosen {
background: var(--ex-hover) !important;
color: var(--ex-text) !important;
}
}
/* ==========================================================================
1.1.8: eliminate Curve2 white flash in desktop dropdown rows
========================================================================== */
@media (min-width: 721px) {
/* Curve2 paints .dropmenu li li:hover itself white. Previous eXtreme
fixes only repainted the , so the parent briefly flashed through
while the pointer crossed rows. Keep exactly one painted layer: .
The link stays transparent and only its text colour transitions. */
.generic_menu .dropmenu li li,
#top_info .dropmenu li li,
.dropmenu li ul > li {
background-color: transparent !important;
background-image: none !important;
border-color: transparent !important;
box-shadow: none !important;
transition: background-color .10s ease-out, border-color .10s ease-out !important;
}
.generic_menu .dropmenu li li:hover,
#top_info .dropmenu li li:hover,
.dropmenu li ul > li:hover {
background-color: var(--ex-surface-soft) !important;
background-image: none !important;
border-color: var(--ex-border) !important;
box-shadow: none !important;
}
.generic_menu .dropmenu li li > a,
.generic_menu .dropmenu li li > a:visited,
#top_info .dropmenu li li > a,
#top_info .dropmenu li li > a:visited,
.dropmenu li ul > li > a,
.dropmenu li ul > li > a:visited {
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
transition: color .10s ease-out, border-color .10s ease-out !important;
}
.generic_menu .dropmenu li li:hover > a,
.generic_menu .dropmenu li li > a:hover,
.generic_menu .dropmenu li li > a:focus-visible,
#top_info .dropmenu li li:hover > a,
#top_info .dropmenu li li > a:hover,
#top_info .dropmenu li li > a:focus-visible,
.dropmenu li ul > li:hover > a,
.dropmenu li ul > li > a:hover,
.dropmenu li ul > li > a:focus-visible {
background-color: transparent !important;
background-image: none !important;
color: var(--ex-text) !important;
text-shadow: none !important;
box-shadow: none !important;
}
}
/* ==========================================================================
1.1.9: single-pass desktop dropdown rendering
========================================================================== */
@media (min-width: 721px) {
/* Do not animate the structural layers of each row. Curve2 reveals its
menus with display:none/block; transitioning the child backgrounds on
that same frame creates a visible multi-stage repaint. Rows therefore
render immediately in their final state. */
.generic_menu .dropmenu li li,
#top_info .dropmenu li li,
.dropmenu li ul > li,
.generic_menu .dropmenu li li > a,
.generic_menu .dropmenu li li > a:visited,
#top_info .dropmenu li li > a,
#top_info .dropmenu li li > a:visited,
.dropmenu li ul > li > a,
.dropmenu li ul > li > a:visited,
.top_menu li,
.top_menu a,
.top_menu a:visited {
transition: none !important;
}
/* Paint dropdown shells as a single composited layer. The background,
border, shadow and contents now fade/move together instead of being
drawn in separate passes. */
.generic_menu .dropmenu > li:hover > ul,
.generic_menu .dropmenu > li:focus-within > ul,
#main_menu .dropmenu > li:hover > ul,
#main_menu .dropmenu > li:focus-within > ul,
#top_info .top_menu[style*="display: block"],
#top_info .top_menu[style*="display:block"] {
animation: extreme-dropdown-in .115s cubic-bezier(.2,.7,.25,1) both !important;
transform-origin: top left !important;
will-change: opacity, transform !important;
backface-visibility: hidden !important;
}
/* Nested desktop submenus get the same one-pass reveal, but from the side
because their natural opening direction is horizontal. */
.generic_menu .dropmenu li li:hover > ul,
.generic_menu .dropmenu li li:focus-within > ul,
#main_menu .dropmenu li li:hover > ul,
#main_menu .dropmenu li li:focus-within > ul {
animation: extreme-submenu-in .105s cubic-bezier(.2,.7,.25,1) both !important;
transform-origin: top left !important;
will-change: opacity, transform !important;
backface-visibility: hidden !important;
}
}
@keyframes extreme-dropdown-in {
from {
opacity: 0;
transform: translate3d(0, -4px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes extreme-submenu-in {
from {
opacity: 0;
transform: translate3d(-3px, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@media (prefers-reduced-motion: reduce) and (min-width: 721px) {
.generic_menu .dropmenu ul,
#main_menu .dropmenu ul,
#top_info .top_menu {
animation: none !important;
}
}