/* Some very big stuff? Dunno... */
@media (min-width: 856px) and (max-width: 1024px) {
.lastpost {
width: 20%;
margin: 3px 0 0 5px;
}
#alerts .alert_time {
display: none;
}
#alerts .alert_inline_time {
display: block;
}
}
/* Still not enough data or people to test this... */
/* This needs more data and this range is probably for iPad Air (alike) tablets... */
@media (min-width: 721px) and (max-width: 855px) {
.lastpost {
margin: 0 0 0 20px;
}
.board_stats {
display: none;
}
#alerts .alert_time {
display: none;
}
#alerts .alert_inline_time {
display: block;
}
}
@media (max-width: 855px) {
#member_list .ip, #member_list .last_active, #member_list .user_name {
display: none !important;
}
/* SZ 2025-11-14 — Tablet top-bar icons match new style */
@media (min-width: 721px) {
/* Hide ONLY the avatar image in the top bar (not in dropdowns) */
#top_info > li:first-child img.avatar {
display: none !important;
}
/* Profile (user) icon in TOP BAR — white outline SVG */
#top_info > li:first-child > a::before {
content: "";
display: inline-block;
width: 22px;
height: 22px;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 22px 22px !important;
vertical-align: middle;
margin-right: 6px;
background-image: url("data:image/svg+xml;utf8,\
");
}
/* Messages (envelope) — white outline SVG in TOP BAR */
#top_info span.main_icons.inbox::before {
content: "";
display: inline-block;
width: 22px;
height: 22px;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 22px 22px !important;
background-image: url("data:image/svg+xml;utf8,\
");
}
/* Notifications (bell) — white outline SVG in TOP BAR */
#top_info span.main_icons.alerts::before {
content: "";
display: inline-block;
width: 22px;
height: 22px;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 22px 22px !important;
background-image: url("data:image/svg+xml;utf8,\
");
transform: translateY(-1px);
}
/* Base state: all three TOP BAR icons support filter animation */
#top_info > li:first-child > a::before,
#top_info span.main_icons.inbox::before,
#top_info span.main_icons.alerts::before {
transition: filter 0.2s ease-in-out;
filter: brightness(0) invert(1); /* white */
}
/* Yellow hover for TOP BAR icons only */
#top_info > li:first-child > a:hover::before,
#top_info > li:first-child > a:active::before,
#top_info span.main_icons.inbox:hover::before,
#top_info span.main_icons.inbox:active::before,
#top_info span.main_icons.alerts:hover::before,
#top_info span.main_icons.alerts:active::before {
filter: brightness(0) saturate(100%) invert(84%) sepia(35%) saturate(900%) hue-rotate(3deg) brightness(105%) contrast(98%);
}
}
/* SZ 2025-11-14 — Icon transparency + remove yellow hover */
#profile_menu_top::before,
span.main_icons.inbox::before,
span.main_icons.alerts::before {
opacity: 0.65; /* default slight transparency */
filter: none !important;
background-color: transparent !important;
transition: opacity 0.2s ease-in-out;
}
/* Hover = make fully white */
#profile_menu_top:hover::before,
span.main_icons.inbox:hover::before,
span.main_icons.alerts:hover::before {
opacity: 1;
filter: none !important;
background-color: transparent !important;
}
}
@media (min-width: 721px) and (max-width: 799px) {
#top_info .welcome {
display: none;
}
/* Calendar */
#event_time_options {
width: 44%;
}
#event_title {
padding: 0;
}
#evtitle {
width: 98%;
}
.event_options_left, .event_options_right {
display: block;
max-width: unset;
width: unset;
}
#event_title input[type="text"] {
width: 100%;
}
#post_event #event_board select {
width: calc(100% - 90px);
max-width: unset;
}
}
/* We have shared things... */
@media screen and (max-width: 720px) {
/* SZ 2025-12-05 — Mobile: hide topic viewing info row to free space */
#display_head > p.sz_topic_viewing {
display: none !important;
}
/* SZ 2025-11-14 — hide desktop-only Sonic buttons in mobile main menu */
#mobile_user_menu .button_menu,
#mobile_user_menu .button_roms,
#mobile_user_menu .button_music,
#mobile_user_menu .button_shows,
#mobile_user_menu .button_extras,
#mobile_user_menu .button_discord {
display: none;
}
/* Remove some content from the hooks table */
#list_integration_hooks th#header_list_integration_hooks_function_name, #list_integration_hooks td.function_name,
#list_integration_hooks th#header_list_integration_hooks_remove, #list_integration_hooks td.remove {
display: none;
}
/*
.forumtitle {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
}*/
.recentboard{
display: none;
}
.forumtitle img{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
width: 250px;
}
/* New Mobile Action/Mod Pop (Test) */
/* SZ 2025-11-30 — normalize vertical spacing inside User actions popup */
#mobile_action .buttonlist {
margin: 0 !important;
padding: 0 !important;
}
/* SZ 2025-11-30 — tighten Add Poll row spacing in mobile User Actions popup */
#mobile_action .sz_mobile_addpoll_wrapper {
margin: 0;
display: block !important;
}
#mobile_action .sz_mobile_addpoll_wrapper .button {
margin: 0;
}
/* Ensure Add poll row shows in the User actions popup */
#mobile_action .sz_mobile_addpoll_wrapper .button_strip_add_poll {
display: block !important;
}
/* SZ 2025-11-30 — tighten vertical gap between Add poll and first action button */
#mobile_action .sz_mobile_addpoll_wrapper {
margin: 0 !important;
padding: 0 !important;
}
#mobile_action .sz_mobile_addpoll_wrapper .button {
margin: 0 !important;
}
.moderationbuttons_check {
display: none;
}
.moderationbuttons_mobile_check {
display: inline-block;
}
#mobile_action .button, #mobile_moderation .button, #mobile_action .top_menu {
width: 100%;
margin: 0;
border-radius: 0;
border-left: 0;
border-right: 0;
text-indent: 5px;
}
#mobile_action .button, #mobile_moderation .button {
line-height: 2.8em;
height: auto;
}
#mobile_action .notify_dropdown {
top: 0 !important;
left: 0 !important;
position: relative;
}
#mobile_action .top_menu {
padding: 0;
margin: 0 auto;
}
#mobile_action .notify_dropdown a, #mobile_moderation .notify_dropdown a {
border-bottom: 1px solid #999;
}
#mobile_action .notify_dropdown a:last-of-type {
border-bottom: none;
}
#mobile_action .notify_dropdown span {
display: none;
}
.mobile_buttons {
margin: 5px 0;
display: flex;
justify-content: flex-start;
gap: 6px;
float: none;
text-align: left;
}
.mobile_buttons .button {
margin: 0;
}
.pagesection .buttonlist, #moderationbuttons {
display: none;
}
/* Stuff */
#top_info {
padding: 5px;
}
.infolinks {
display: inline-block;
margin: 5px 7px 0 0;
}
#registration .field_icons {
float: left;
margin: 5px 0 0 3px;
}
dl.register_form dt span {
display: inline;
}
#quick_actions {
display: flex;
justify-content: flex-end;
}
#quick_actions > * {
flex: 0 1 auto;
margin: 0 5px 0 0;
max-width: 40%;
white-space: nowrap;
}
#quick_actions > .button.qaction {
flex: 0 0 auto;
margin: 0 !important;
}
/* SZ 2025-12-05 — Mobile: square post quickbuttons */
#forumposts .quickbuttons > li > a,
#forumposts .inline_mod_check {
border-radius: 6px !important;
}
/* SZ 2025-12-05 — Small: collapsible signatures */
#forumposts .signature {
margin-top: 10px;
padding: 0;
border: none;
background: transparent;
}
#forumposts .signature .sz_sig_toggle_bar {
display: flex;
align-items: center;
justify-content: center;
padding: 6px 10px;
border-radius: 6px;
background: linear-gradient(#f4f4f4, #e4e4e4);
border: 1px solid #c9c9c9;
color: #777;
font-size: 0.8rem;
cursor: pointer;
}
#forumposts .signature .sz_sig_toggle_label {
margin-right: 6px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
color: #8a8a8a;
}
#forumposts .signature .sz_sig_toggle_chevron {
border-width: 4px 4px 0 4px;
border-style: solid;
border-color: #666 transparent transparent transparent;
width: 0;
height: 0;
}
#forumposts .signature.sz-sig-open .sz_sig_toggle_chevron {
transform: rotate(180deg);
}
#forumposts .signature.sz-sig-open .sz_sig_toggle_bar {
background: linear-gradient(#e0e0e0, #c8c8c8);
border-color: #b0b0b0;
}
#forumposts .signature .sz_sig_body {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.2s ease-out, opacity 0.18s ease-out;
margin-top: 0;
border: 1px solid #c9c9c9;
border-top: none;
border-radius: 0 0 8px 8px;
background: #fdfdfd;
padding: 10px 12px;
}
#forumposts .signature.sz-sig-open .sz_sig_body {
max-height: 900px;
opacity: 1;
margin-top: 6px;
}
/* Menu */
.quickbuttons li:hover ul {
display: none;
}
/* General */
.action_home {
width: 100% !important;
}
#wrapper {
border-left: 0;
border-right: 0;
border-radius: 0;
}
#footer {
padding: 10px;
}
#top_section .inner_wrap, #wrapper, #header, #footer .inner_wrap {
width: 100%;
}
#upper_section, #inner_section, #content_section {
border-radius: 0;
}
#boardindex_table .stats {
display: none;
}
.login {
width: 100%;
}
#inner_wrap {
flex-flow: row wrap;
}
#inner_wrap .user,
#inner_wrap .news {
width: auto;
max-width: initial;
}
#languages_form {
padding-right: 10px;
}
/* BoardIndex */
.board_stats {
display: none;
}
.info {
width: calc(100% - 65px);
}
.lastpost {
width: 100%;
padding: 0;
display: block;
min-height: 2em;
}
.up_contain .lastpost {
border-top: 1px solid #ddd;
min-height: initial;
}
.lastpost p {
margin: 5px;
}
span.postby {
display: inline-block;
}
/* Stats Center */
#ic_recentposts {
margin: 0;
width: 100%;
}
#upshrink_stats p.inline, #upshrink_stats p.last {
padding: 5px;
}
/* MessageIndex */
#messageindex .board_icon, #messageindex .lastpost {
display: none;
}
#messageindex .info {
padding: 8px 10px;
}
.info_block {
display: block;
width: 95%;
}
.moderation a {
padding: 3px;
}
#topic_container .moderation .main_icons {
display: none;
}
/* Unread */
#unread .board_icon, #unread .lastpost, #unreadreplies .board_icon, #unreadreplies .lastpost {
display: none;
}
#unread .info, #unreadreplies .info {
padding-left: 5px;
}
/* Display (Topics) */
.poster {
float: none;
width: auto;
position: relative;
}
.postarea {
margin: 0;
}
/* SZ 2025-12-05 — Small: extra space between posts */
#forumposts .post_wrapper {
margin-bottom: 16px;
}
.inner {
padding: 1em 2px;
}
.moderatorbar {
margin: 0;
}
.keyinfo {
padding-top: 5px;
margin-top: 5px;
clear: both;
}
.keyinfo .postinfo {
font-weight: normal;
}
.keyinfo .postinfo .smalltext,
.keyinfo .page_number {
opacity: 0.6;
}
.keyinfo .postinfo a.smalltext:hover {
opacity: 1;
}
img.icon, #forumposts .catbg img {
display: none;
}
.poster h4 {
display: inline-block;
}
.user_info {
display: inline;
}
.user_info li,
.custom_fields_above_member {
display: none;
}
.user_info li.title,
.user_info li.membergroup {
display: inline-block;
font-weight: normal;
}
.user_info li::before {
content: "·";
padding: 0 1ch 0 0.5ch;
}
.like_count,
.smflikebutton:last-child {
margin-bottom: 8px;
}
.button.mobile {
margin: 0 0 5px 0;
}
.pagelinks {
margin: 0;
}
/* SZ 2025-12-05 — Mobile topic pagination alignment + left align */
#display_head > div.pagesection.top.sz_top_actions > div.pagelinks.floatleft {
float: left;
text-align: left;
}
#display_head > div.pagesection.top.sz_top_actions > div.pagelinks.floatleft > span.current_page {
transform: translateY(-1px);
background: linear-gradient(#d3d3d3, #a6a6a6) !important;
border: 1px solid #7a7a7a !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22) !important;
color: #000000 !important;
}
/* Profile */
#admin_content .content {
padding: 0;
}
#creator dt {
width: 33%;
}
#creator dd {
width: 65%;
}
#basicinfo, #detailedinfo {
width: 100%;
}
#basicinfo {
margin: 0 0 5px 0; /* For UX */
}
/* Buddies & Ignore List */
#edit_buddies .buddy_custom_fields {
display: none;
}
/* PersonalMessages */
#personal_messages .pm_time, #personal_messages .pm_from_to {
display: none;
}
#personal_messages .pm_inline_time {
display: block;
}
/* Alerts Page */
#alerts .alert_text, #alerts .alert_time, #alerts .alert_buttons {
display: block;
}
#alerts .alert_time {
float: left;
}
#alerts .alert_text {
margin: 11px 0 0;
}
#alerts .alert_buttons .quickbuttons {
margin: 0 0 11px;
display: block;
}
#alerts .alert_image {
width: 60px;
}
/* Post Screen */
form#postmodify .roundframe, #post_event .roundframe {
padding: 5px;
}
#post_header input {
width: 100%;
}
#post_confirm_buttons .smalltext {
display: none;
}
ul.post_options {
padding: 0;
margin: 0;
}
ul.post_options li {
margin: 2px 5px 0 0;
width: 48%;
}
/* Search */
#searchform .roundframe {
padding: 5px;
}
#advanced_search dt {
text-align: left;
width: 100%;
float: left;
}
#advanced_search dd {
width: auto;
}
#advanced_search dl#search_options {
width: 100%;
}
input#searchfor, input#userspec {
width: 75%;
}
/* Hide me */
#inner_wrap.hide_720, #inner_wrap time, #inner_wrap .news,
#search_form, #smflogo, #message_index_jump_to, .nextlinks, #display_jump_to,
#siteslogan, th.id_group, th.registered, th.posts, th.reg_group, th.reg_date, td.reg_group, td.reg_date,
td.id_group, td.registered, td.posts:not(.unique), td.statsbar.posts,
#approve_list .ip, #approve_list .date_registered, #group_members .date_registered,
.time,
#header_custom_profile_fields_field_type, #header_custom_profile_fields_active,
#header_custom_profile_fields_placement, #custom_profile_fields .active, #custom_profile_fields .field_type, #custom_profile_fields .placement {
display: none !important;
}
/* Generic Lists */
#topic_notification_list .last_post, #topic_notification_list .started_by,
#request_list .time_applied, #file_list .date, #ban_list .notes, #ban_list .reason, #ban_log .email,
#mail_queue .priority, #attachments .posted {
display: none;
}
/* Admin */
.admin_search {
float: none;
}
.table_grid.half_content {
width: 100%;
margin: 0;
padding: 0;
}
.table_grid select {
max-width: 85vw;
}
#private, #enclose {
width: 95%;
}
/* Edit Language */
#language_list .character_set {
display: none;
}
/* Generic Classes for Customizations */
.hide_720 {
display: none;
}
.block_720 {
display: block;
}
.inlineblock_720 {
display: inline-block;
}
}
/* Tricky menu */
/* Desktop: keep the normal horizontal menu visible again */
@media (min-width: 721px) {
/* Show the main menu containers as part of the page */
#mobile_user_menu.popup_container,
div[id^="mobile_generic_menu_"].popup_container {
display: block !important;
position: static;
width: auto;
height: auto;
}
/* Remove any popup styling on desktop */
#main_menu .popup_window,
#genericmenu .popup_window,
#adm_submenus .popup_window {
box-shadow: none;
border-width: 0;
background: none;
}
}
@media (max-width: 720px) {
/* This is general */
#main_menu .popup_container,
#genericmenu .popup_container,
#adm_submenus .popup_container {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
}
#main_menu .popup_heading,
#genericmenu .popup_heading,
#adm_submenus .popup_heading {
display: block;
}
#main_menu {
margin: 0;
}
.popup_window,
#main_menu .popup_window,
#genericmenu .popup_window,
#adm_submenus .popup_window {
top: 15%;
width: 95vw;
min-height: auto;
max-height: 90vh;
overflow-x: hidden;
overflow-y: scroll;
}
#adm_submenus {
padding: 0;
}
#adm_submenus .dropmenu li {
float: left;
margin: 0;
}
.generic_menu {
display: none;
}
#mobile_user_menu .dropmenu,
div[id^="mobile_generic_menu_"] .generic_menu {
display: block;
}
a.mobile_user_menu,
a[class^="mobile_generic_menu_"] {
display: flex;
align-items: center;
margin: 0 0 4px 0;
}
a[class^="mobile_generic_menu_"] {
margin: 8px 0;
}
.menu_icon {
display: inline-block;
background: url(../images/icons/menu.svg) no-repeat;
height: 24px;
width: 24px;
}
.dropmenu li, .dropmenu li:hover,
.dropmenu li a, .dropmenu li a:hover,
.dropmenu li a.active, .dropmenu li a.active:hover, .dropmenu li:hover a.active,
.dropmenu li ul, .dropmenu li li, .dropmenu li li a {
width: 100%;
padding: 0;
margin: 0;
border-left: 0;
border-right: 0;
}
.dropmenu li a, .dropmenu li a:hover {
text-indent: 10px;
border-radius: 0;
padding: 5px 0 !important;
}
.dropmenu li li li a,
.dropmenu li li li a:hover {
padding: 5px 24px !important;
}
.dropmenu li a, .dropmenu li:hover a,
.dropmenu li a.active, .dropmenu li a.active:hover,
.dropmenu ul li a:hover, .dropmenu li li a:hover,
.dropmenu ul li li:hover, .dropmenu li ul,
.dropmenu li li:hover ul, .dropmenu li li ul {
border-left: 0;
border-right: 0;
}
.dropmenu ul li a {
width: auto !important;
}
.dropmenu li.subsections > a::after {
position: absolute;
padding: 5px 0;
right: 10px;
font: 83.33%/150% Arial, sans-serif;
content: "\25bc" !important;
}
.dropmenu li ul,
.dropmenu li li:hover ul, .dropmenu li li ul {
position: relative;
border-radius: 0;
left: 0;
box-shadow: none;
}
/* SZ: mobile main menu popup align under top bar */
#mobile_user_menu.popup_container {
/* dark overlay, like other popups */
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
#mobile_user_menu .popup_window {
/* position it so it “drops down” from the top black bar */
top: 52px;
left: auto;
right: 8px;
width: calc(100% - 16px);
max-width: 420px;
margin: 0;
/* match the dark card look of the top-bar menus */
background: linear-gradient(#1b1c21 0%, #24252b 70%);
border: 1px solid #3b3d46;
border-radius: 0 0 14px 14px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.75);
color: #e0e0e0;
}
#mobile_user_menu .popup_content {
/* remove the old white card look */
background: transparent;
border: none;
box-shadow: none;
}
#mobile_user_menu .popup_window li a {
color: #d0d0d0;
}
#mobile_user_menu .popup_window li a:hover,
#mobile_user_menu .popup_window li a:focus {
background: rgba(255, 255, 255, 0.06);
color: #ffffff;
}
/* 3rd level menu tests */
.dropmenu li ul ul {
margin: 0 !important;
}
}
@media (min-width: 481px) and (max-width: 560px) {
.forumtitle img{
width: 250px;
margin-top: 4px;
}
/* Calendar */
#event_time_options {
width: 40%;
}
#event_title, #event_board {
width: 100%;
}
#evtitle {
width: 98%;
}
}
/* Entry level phones */
@media (max-width: 480px) {
.recentposter{
display: none;
}
.forumtitle img{
width: 190px;
margin-top: 4px;
}
h1.forumtitle a, h1.forumtitle {
max-width: 250px;
margin: auto
}
.board_moderators {
display: none;
}
#top_info .welcome {
display: none;
}
#pm_menu, #alerts_menu, #profile_menu {
min-width: initial;
width: 25em;
max-width: calc(100vw - 17px);
}
#footer {
text-align: center;
}
#footer ul {
width: 100%;
float: none;
}
#footer li {
display: block;
float: none;
}
/* MessageIndex */
#main_content_section .pagelinks {
display: block;
}
#main_content_section .pagesection {
margin: 5px 0;
padding: 0;
}
#topic_icons p {
display: block;
width: 100%;
}
/* some new stuff for far better UX */
.mobile_subject {
position: relative;
}
fieldset {
max-width: 100%;
min-width: unset;
}
/* Register Page */
#registration .button {
font-size: 0.67em;
}
dl.register_form, dl.register_form dt, dl.register_form dd {
float: none;
width: 100%;
}
/* Login Page */
.login dt, .login dd {
float: none;
width: 100%;
text-align: left;
}
.login #ajax_loginuser, .login #ajax_loginpass, .login #loginuser, .login #loginpass, .login select {
width: 100%;
}
/* Display (Topic View) */
.subject_title input {
width: 90%;
}
#quickreply_options .roundframe {
padding: 8px 10px 12px 10px;
}
/* Post Section */
#post_header dd {
width: 55%;
}
#post_header dt {
width: 35%;
}
img#icons {
margin: 0 0 0 5px;
}
#quickreply_options #postmodify {
width: 100%;
}
/* Poll */
#poll_options dl.options {
padding: 0;
}
#poll_options dl.options dt,
#poll_options dl.options dd,
dl.settings dt, dl.settings dd,
#creator .settings dt, #creator .settings dd,
div#report_form dl.settings dd, div#report_form dl.settings dt,
#tracking dt, #tracking dd,
#detailedinfo dt, #detailedinfo dd,
#advanced_search dt, #advanced_search dd {
width: 100%;
float: none;
}
#post_draft_options dl.settings dt, #post_draft_options dl.settings dd {
width: 50%;
float: left;
}
dl.settings dd textarea, #report_comment {
width: 100%;
}
.move_topic {
width: 100%;
}
.bbc_float {
max-width: 100% !important;
margin-left: 0.5em !important;
margin-right: 0.5em !important;
}
/* PersonalMessages */
#personal_messages .pm_icon {
display: none;
}
#personal_messages div.labels {
clear: both;
}
/* Alerts page */
#alerts .alert_image {
width: 40px;
padding-left: 6px;
}
#alerts .alert_image .avatar {
display: none;
}
#alerts .alert_image .avatar + .alert_icon {
position: static;
}
/* Buddies & Ignore List */
#edit_buddies .buddy_email {
display: none;
}
/* Stats Center */
.half_content {
width: 100%;
margin: 0;
padding: 0;
}
th.recentboard, th.recenttime,
td.recentboard, td.recenttime {
display: none;
}
.sceditor-container {
min-height: 375px;
}
/* Memberlist */
th.website_url,
td.website_url, td.reg_group, td.reg_date, td.post_num {
display: none;
}
#mlist .post_count {
width: 50px;
}
#mlist .post_count .generic_bar {
border: 0;
background: transparent;
color: inherit;
}
#mlist .post_count .generic_bar .bar {
background: transparent;
box-shadow: none;
}
#mlist_search dt {
width: 100%;
display: block;
padding: 0;
}
#mlist_search dd {
padding: 0;
margin: 0;
}
#mlist_search input[type="checkbox"] {
margin: 0 13px 3px 3px;
vertical-align: middle;
}
/* Moderation */
.post_note input {
width: 75%;
}
.modbox .floatleft {
float: none;
}
#warning_list .reason, #moderation_log_list .position, #moderation_log_list .ip, #group_members .last_active,
#group_request_list .date, #group_lists .icons, #regular_membergroups_list .icons, #post_count_membergroups_list .icons, #watch_user_list .last_login {
display: none;
}
/* Admin */
#live_news, #support_info {
width: 100%;
padding: 0;
margin: 0 0 5px 0;
}
fieldset.admin_group a {
width: 50%;
float: left;
margin: 0 0 5px 0;
}
.error_info, #fatal_error {
width: 100% !important;
padding: 0 !important;
float: none;
}
/* Calendar */
.event_options_left, .event_options_right {
width: 100%;
}
#event_title, #event_board {
width: 100%;
}
#evtitle {
width: 98%;
}
/* Menu tests */
#header_news_lists_preview, tr[id^="list_news_lists_"] td:nth-child(even),
#header_smiley_set_list_default, #header_smiley_set_list_url, #header_smiley_set_list_check,
tr[id^="list_smiley_set_list_"] td:nth-child(odd),
#header_mail_queue_priority,
tr[id^="list_mail_queue_"] td:nth-child(odd),
#header_member_list_user_name, #header_member_list_ip,
#header_member_list_last_active, #header_member_list_posts {
display: none;
}
tr[id^="list_mail_queue_"] td:first-of-type,
tr[id^="list_mail_queue_"] td:last-of-type {
display: table-cell;
}
.msearch_details {
width: 100% !important;
float: none;
}
.msearch_details .righttext {
text-align: left;
}
.msearch_details input {
width: 90%;
}
.msearch_details input[type="checkbox"] {
width: 5%;
}
/* Generic Lists */
#request_list .time_applied,
#track_user_list .date, #track_user_list .date2, #file_list .filesize, #file_list .downloads,
#ban_list .added, #ban_list .num_triggers, #ban_log .date, #mail_queue .age, #attachments .subject {
display: none;
}
/* Likes */
#likes li .like_time {
display: none;
}
/* Generic Classes for Customizations */
.hide_480 {
display: none;
}
.block_480 {
display: block;
}
.inlineblock_480 {
display: inline-block;
}
}
/* iPhone Tests */
@media (max-width: 480px) {
.forumtitle{
display: block;
width: 100%;
margin: auto;
}
}
/* Mobile: hide unread row completely (keep breadcrumbs visible) */
@media screen and (max-width: 720px) {
.unread_links_relocated,
.unread_menu_link {
display: none !important;
}
}
/* Mobile: remove gray divider line between logo and menu */
@media screen and (max-width: 720px) {
#header {
border-bottom: none !important;
margin-bottom: 0;
}
#wrapper,
#upper_section {
border-top: none !important;
margin-top: 0;
}
}
/* Mobile: remove gray line above Menu */
@media screen and (max-width: 720px) {
#inner_wrap {
border-bottom: none !important;
margin-bottom: 0;
}
}
/* SZ 2025-11-14 — Mobile topic/board primary buttons + dark User actions popup */
@media screen and (max-width: 720px) {
/* In the mobile "User actions" popup, keep only the last two entries
(Print + No alerts/emails). Hide the first three (Reply/Add poll/Mark unread
or New topic/New poll/Mark read). */
/* Hide first 3 links inside the popup (Reply/Add poll/Mark unread or New topic/New poll/Mark read) */
#mobile_action .notify_dropdown a:nth-of-type(-n+3) {
display: none !important;
}
/* Dark overlay for the popup background */
#mobile_action.popup_container, #mobile_moderation.popup_container {
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(4px);
}
/* Window styling — match the dark gradient feel of the top bar / mobile menu */
#mobile_action .popup_window, #mobile_moderation .popup_window {
background: linear-gradient(#1c1c1e 0%, #28292b 70%) !important;
color: #f4f4f4;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.8);
}
/* Heading: transparent bar with subtle bottom border */
#mobile_action .popup_window .popup_heading, #mobile_moderation .popup_window .popup_heading {
background: transparent !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
color: #f4f4f4;
padding: 10px 14px;
}
#mobile_action .popup_window .popup_content, #mobile_moderation .popup_window .popup_content {
background: transparent;
}
/* Remove grey dividers + tighten spacing + text style */
#mobile_action .notify_dropdown a, #mobile_moderation .notify_dropdown a {
display: block;
padding: 6px 14px;
font-size: 0.9rem;
color: #e3e3e3;
border-bottom: none;
text-decoration: none;
}
#mobile_action .notify_dropdown a:hover,
#mobile_action .notify_dropdown a:focus,
#mobile_moderation .notify_dropdown a:hover,
#mobile_moderation .notify_dropdown a:focus {
background: transparent;
color: #ffffff;
text-decoration: none;
}
/* Base button/link style inside the User actions popup */
#mobile_action .buttonlist, #mobile_moderation .buttonlist {
margin: 0;
padding: 4px 0 8px;
}
#mobile_action .buttonlist li, #mobile_moderation .buttonlist li {
border: none;
margin: 0;
}
#mobile_action .buttonlist .button, #mobile_moderation .buttonlist .button {
display: block;
width: 100%;
text-align: left;
padding: 6px 14px;
font-size: 0.9rem;
background: transparent;
color: #e3e3e3;
border: none;
border-radius: 0;
box-shadow: none;
text-decoration: none !important;
}
#mobile_action .buttonlist .button:hover,
#mobile_action .buttonlist .button:focus,
#mobile_moderation .buttonlist .button:hover,
#mobile_moderation .buttonlist .button:focus {
background: transparent;
color: #ffffff;
text-decoration: none !important;
}
}
/* SZ 2025-11-14 — Show primary topic buttons on mobile */
@media screen and (max-width: 720px) {
/* Re-enable the main topic button strip (Reply, Add poll, Mark unread, etc.) */
.pagesection .buttonlist {
display: block !important;
}
}
/* === MOBILE BUTTON ORDER FIX — TOPIC & BOARD — SONIC ZONE === */
/* Hide all mobile strip buttons by default */
@media (max-width: 720px) {
.pagesection.top .button_strip_reply,
.mobile_buttons_floatright a.button_strip_add_poll,
.mobile_buttons_floatright a.button_strip_mark_unread,
.mobile_buttons_floatright a.button_strip_new_topic,
.mobile_buttons_floatright a.button_strip_post_poll,
.mobile_buttons_floatright a.button_strip_markread,
.mobile_buttons_floatright a.button_strip_notify {
display: none !important;
}
/* TOPIC PAGE: show these 3 in correct order */
.pagesection.top .button_strip_reply {
display: inline-block !important;
order: 1;
}
.mobile_buttons_floatright a.button_strip_add_poll {
display: inline-block !important;
order: 2;
}
.mobile_buttons_floatright a.button_strip_mark_unread {
display: inline-block !important;
order: 3;
}
/* BOARD PAGE: show these 3 in correct order */
.mobile_buttons_floatright a.button_strip_new_topic {
display: inline-block !important;
order: 1;
}
.mobile_buttons_floatright a.button_strip_post_poll {
display: inline-block !important;
order: 2;
}
.mobile_buttons_floatright a.button_strip_markread {
display: inline-block !important;
order: 3;
}
/* Force the "User Actions" button to always appear LAST */
.mobile_buttons_floatright a.mobile_act {
order: 99 !important;
}
}
/* SZ 2025-11-14 — Hide secondary strip buttons on mobile */
@media screen and (max-width: 720px) {
/* Topic view: hide Print + No alerts/emails */
body.action_display .pagesection.top .buttonlist a.button_strip_print,
body.action_display .pagesection.top .buttonlist a.button_strip_notify {
display: none !important;
}
/* Board view: hide No alerts/emails */
body.action_board .pagesection.top .buttonlist a.button_strip_notify {
display: none !important;
}
}
/* SZ 2025-11-14 — Global hide for Print + No alerts on mobile */
@media screen and (max-width: 720px) {
/* Anywhere in the forum, hide these strip buttons on small screens */
.pagesection .buttonlist a.button_strip_print,
.pagesection .buttonlist a.button_strip_notify {
display: none !important;
}
}
/* SZ 2025-11-14 — Final: always show breadcrumbs */
.navigate_section {
display: block !important;
visibility: visible !important;
height: auto !important;
overflow: visible !important;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}\n
\n\n
\n
/* SZ 2025-11-15 — Always hide BotBanish in mobile popup menu */
#mobile_user_menu li.button_botbanish.subsections,
#mobile_user_menu li.button_botbanish,
#mobile_user_menu li[class*="button_botbanish"] {
display: none !important;
}
/* SZ 2025-11-16 — Mobile arrow full opacity on active */
#profile_menu_top:hover::after,
#profile_menu_top:active::after,
#profile_menu_top.profile_open::after {
opacity: 1 !important;
}
/* SZ 2025-11-16 — Mobile profile chevron arrow */
@media screen and (max-width: 720px) {
#profile_menu_top::after {
content: "";
display: inline-block;
width: 14px;
height: 8px;
margin-left: 6px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.6;
background-image: url("data:image/svg+xml;utf8,");
}
#profile_menu_top:hover::after,
#profile_menu_top:active::after,
#profile_menu_top.profile_open::after {
opacity: 1 !important;
background-image: url("data:image/svg+xml;utf8,");
}
}
/* SZ 2025-11-15 — Admin menus consolidated (desktop/tablet only) */
@media screen and (min-width: 721px) {
/* Top admin tabs: default state (slightly bold Sonic purple) */
body.action_admin #genericmenu .generic_menu .dropmenu > li > a {
color: #43359D !important; /* Sonic purple default */
text-shadow: none !important;
font-weight: 600 !important; /* subtle bold for all tabs */
transition: color 0.18s ease-in-out;
}
/* Top admin tabs: hover/focus (inactive tabs only) */
body.action_admin #genericmenu .generic_menu .dropmenu > li:not(.active) > a:hover,
body.action_admin #genericmenu .generic_menu .dropmenu > li:not(.active) > a:focus {
color: #5141BF !important; /* slightly brighter purple on hover */
}
/* Top admin tabs: active tab (current page) */
body.action_admin #genericmenu .generic_menu .dropmenu > li > a.active,
body.action_admin #genericmenu .dropmenu > li.active > a {
color: #ffffff !important; /* white text on blue pill */
font-weight: 700 !important; /* slightly stronger for current tab */
border-bottom: 3px solid #4251bc; /* clear blue underline highlight */
}
/* Child submenu popout under top admin tabs (2nd level) */
body.action_admin #genericmenu .dropmenu li li > a {
color: #333 !important; /* darker, readable text */
text-shadow: none !important;
}
/* Child submenu hover/focus: simple flat highlight */
body.action_admin #genericmenu .dropmenu li li > a:hover,
body.action_admin #genericmenu .dropmenu li li > a:focus {
color: #111 !important; /* extra contrast on hover */
background: #f2f2f2 !important;/* light flat background */
border-color: transparent !important;
box-shadow: none !important;
}
/* Left-side admin vertical menu (Boards and Categories, Posts and Topics, etc.) */
body.action_admin a.admin_menu_icon {
color: #333333 !important; /* darker default text */
}
body.action_admin a.admin_menu_icon:hover,
body.action_admin a.admin_menu_icon:focus {
color: #111111 !important; /* very dark on hover/focus */
}
body.action_admin a.admin_menu_icon.chosen {
color: #ffffff !important; /* active item = white text on blue */
}
}
/* SZ 2025-11-16 — Active admin tab: purple pill + hover */
@media screen and (min-width: 721px) {
/* Default active tab state: white text on #43359D */
body.action_admin #genericmenu .dropmenu > li.active > a,
body.action_admin #genericmenu .generic_menu .dropmenu > li > a.active {
background-color: #43359D !important;
color: #ffffff !important;
text-decoration: none !important;
transition: background-color 0.18s ease-in-out;
}
/* Hover/Focus on active tab: keep white text, shift bg to #5141BF */
body.action_admin #genericmenu .dropmenu > li.active > a:hover,
body.action_admin #genericmenu .dropmenu > li.active > a:focus,
body.action_admin #genericmenu .generic_menu .dropmenu > li > a.active:hover,
body.action_admin #genericmenu .generic_menu .dropmenu > li > a.active:focus {
background-color: #5141BF !important;
color: #ffffff !important;
text-decoration: none !important;
}
}
/* SZ 2025-11-16 — FINAL override: force active admin tab pill colors */
@media screen and (min-width: 721px) {
body.action_admin #genericmenu .dropmenu a.active,
body.action_admin #genericmenu .dropmenu > li.active > a {
background-color: #43359D !important; /* default active pill */
color: #ffffff !important;
text-decoration: none !important;
transition: background-color 0.18s ease-in-out;
}
body.action_admin #genericmenu .dropmenu a.active:hover,
body.action_admin #genericmenu .dropmenu a.active:focus,
body.action_admin #genericmenu .dropmenu > li.active > a:hover,
body.action_admin #genericmenu .dropmenu > li.active > a:focus {
background-color: #5141BF !important; /* hover active pill */
color: #ffffff !important;
text-decoration: none !important;
}
}
/* SZ 2025-11-16 — Admin mobile menu: fully match Sonic hamburger menu */
@media (max-width: 720px) {
/* Overlay + positioning same as main hamburger menu */
body.action_admin div[id^="mobile_generic_menu_"].popup_container {
background: rgba(0, 0, 0, 0.55) !important;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
position: fixed !important;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
}
body.action_admin div[id^="mobile_generic_menu_"] .popup_window {
top: 52px;
left: auto;
right: 8px;
width: calc(100% - 16px);
max-width: 420px;
margin: 0;
background: linear-gradient(#1b1c21 0%, #24252b 70%);
border: 1px solid #3b3d46;
border-radius: 0 0 14px 14px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.75);
color: #e0e0e0;
}
body.action_admin div[id^="mobile_generic_menu_"] .popup_content {
background: transparent;
border: none;
box-shadow: none;
}
/* Links inside admin mobile panel */
body.action_admin div[id^="mobile_generic_menu_"] .popup_window li a {
background: transparent !important;
color: #e0e0e0 !important;
}
body.action_admin div[id^="mobile_generic_menu_"] .popup_window li a:hover,
body.action_admin div[id^="mobile_generic_menu_"] .popup_window li a:focus {
background: rgba(255, 255, 255, 0.06) !important;
color: #ffffff !important;
}
}
/* SZ 2025-11-16 — Admin mobile menu rows: force same look as hamburger menu */
@media (max-width: 720px) {
/* Top-level rows (Main, Configuration, Forum, etc.) */
body.action_admin div[id^="mobile_generic_menu_"] ul.dropmenu > li > a {
background: transparent !important;
color: #e0e0e0 !important;
border: none !important;
}
body.action_admin div[id^="mobile_generic_menu_"] ul.dropmenu > li > a:hover,
body.action_admin div[id^="mobile_generic_menu_"] ul.dropmenu > li > a:focus {
background: rgba(255, 255, 255, 0.06) !important;
color: #ffffff !important;
}
/* Active top-level row */
body.action_admin div[id^="mobile_generic_menu_"] ul.dropmenu > li > a.active {
background: transparent !important;
color: #ffffff !important; /* match yellow active accent from hamburger menu */
font-weight: 700 !important;
}
}
/* SZ 2025-11-16 — Admin mobile popup: fix heading + child rows */
@media (max-width: 720px) {
/* Title bar: match hamburger popup heading */
body.action_admin div[id^="mobile_generic_menu_"] .popup_heading {
background: transparent !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
color: #f4f4f4 !important;
padding: 10px 14px;
}
/* Child rows (inside sections like Main/Configuration) */
body.action_admin div[id^="mobile_generic_menu_"] .dropmenu li li > a {
background: #1b1c20 !important;
color: #e0e0e0 !important;
border: none !important;
}
body.action_admin div[id^="mobile_generic_menu_"] .dropmenu li li > a:hover,
body.action_admin div[id^="mobile_generic_menu_"] .dropmenu li li > a:focus {
background: #222327 !important;
color: #ffffff !important;
}
}
/* SZ 2025-11-16 — Admin mobile active row hover: match hamburger, no purple */
@media (max-width: 720px) {
body.action_admin div[id^="mobile_generic_menu_"] .dropmenu > li > a.active,
body.action_admin div[id^="mobile_generic_menu_"] .dropmenu > li > a.active:hover,
body.action_admin div[id^="mobile_generic_menu_"] .dropmenu > li > a.active:focus {
background: transparent !important;
color: #ffffff !important; /* Sonic yellow text like main mobile Admin item */
font-weight: 700 !important;
}
}
/* SZ 2025-11-16 — FINAL admin mobile active row: kill purple background */
@media screen and (max-width: 720px) {
body.action_admin #mobile_generic_menu_1 .dropmenu li a.active,
body.action_admin #mobile_generic_menu_1 .dropmenu li a.active:hover,
body.action_admin #mobile_generic_menu_1 .dropmenu li a.active:focus {
background: transparent !important;
color: #ffffff !important; /* Sonic yellow text only */
font-weight: 700 !important;
}
}
/* SZ 2025-11-16 — Admin mobile menu: replace red X with white */
@media screen and (max-width: 720px) {
body.action_admin div[id^="mobile_generic_menu_"] .popup_heading a.generic_menu_close,
body.action_admin div[id^="mobile_generic_menu_"] .popup_heading a.generic_menu_close:hover,
body.action_admin div[id^="mobile_generic_menu_"] .popup_heading a.generic_menu_close:focus {
color: #ffffff !important;
text-shadow: none !important;
}
}
/* SZ 2025-11-16 — Admin mobile child menus: remove icons */
@media screen and (max-width: 720px) {
/* Remove sprite icons from child rows inside admin mobile popup */
body.action_admin div[id^="mobile_generic_menu_"] .dropmenu li li > a.admin_menu_icon,
body.action_admin div[id^="mobile_generic_menu_"] .dropmenu li li > a[class*="admin_menu_icon"] {
background-image: none !important;
padding-left: 14px !important; /* align text where icon used to be */
}
body.action_admin div[id^="mobile_generic_menu_"] .dropmenu li li > a.admin_menu_icon::before,
body.action_admin div[id^="mobile_generic_menu_"] .dropmenu li li > a[class*="admin_menu_icon"]::before {
content: none !important;
background: none !important;
}
}
/* SZ 2025-11-16 — Admin mobile child menus: hide span main_icons sprites */
@media screen and (max-width: 720px) {
/* Completely remove icon spans inside child rows */
body.action_admin div[id^="mobile_generic_menu_"] .dropmenu li li span.main_icons,
body.action_admin div[id^="mobile_generic_menu_"] .dropmenu li li span[class*="main_icons"] {
display: none !important;
background: none !important;
}
body.action_admin div[id^="mobile_generic_menu_"] .dropmenu li li span.main_icons::before,
body.action_admin div[id^="mobile_generic_menu_"] .dropmenu li li span[class*="main_icons"]::before {
content: none !important;
background: none !important;
}
/* SZ fix — center mobile bell icon */
span.main_icons.alerts::before { transform: translateY(-1px) !important; }
#pm_menu_top > span.main_icons.inbox::before { transform: translateY(1px) !important; }
}
/* SZ 2025-11-16 — Mobile main menu: extra spacing for parent items with submenus */
@media (max-width: 720px) {
/* Only affect mobile popup menu parents like Admin / Moderate / Members */
#mobile_user_menu .dropmenu li.subsections > a.sf-with-ul {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
}
/* SZ 2025-11-16 — Mobile main menu: unified vertical spacing for all items */
@media (max-width: 720px) {
/* Apply same padding to ALL top-level items in the mobile main menu
(Home, New topic, Search, Admin, Moderate, Members, etc.) */
#mobile_user_menu .dropmenu > li > a {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
}
/* SZ 2025-11-16 — Mobile main menu heading label = softer "Menu" */
@media (max-width: 720px) {
/* Replace visible text "Main Menu" with a softer "Menu" label */
#mobile_user_menu .popup_heading {
position: relative;
color: transparent; /* hide original label text only */
}
#mobile_user_menu .popup_heading::before {
content: "Menu";
color: rgba(244, 244, 244, 0.7); /* semi-transparent */
font-weight: 500;
}
}
/* SZ 2025-11-16 — Mobile menu: remove extra X inside popup heading (Step 2) */
@media (max-width: 720px) {
#mobile_user_menu .popup_heading a.main_icons.hide_popup {
display: none !important;
}
}
/* SZ 2025-11-16 — Mobile alerts badge: show + align like tablet */
@media (max-width: 720px) {
/* Make the alerts li a positioning context */
#top_info #alerts_menu_top {
position: relative;
}
/* Force the orange badge to show and sit on the bell */
#top_info #alerts_menu_top .amt {
display: inline-block !important;
position: absolute;
top: 2px;
right: -3px;
margin: 0;
padding: 0 5px;
min-width: 14px;
height: 14px;
line-height: 14px;
font-size: 11px;
border-radius: 7px;
background: #fd7100;
color: #fff;
}
}
/* SZ 2025-11-16 — Mobile breadcrumbs squared (strong override) */
@media (max-width: 720px) {
#main_content_section .navigate_section ul,
.navigate_section ul {
border-radius: 0 !important;
}
}
/* SZ 2025-11-16 — Mobile breadcrumbs squared (no animation changes) */
@media (max-width: 720px) {
.navigate_section ul {
border-radius: 0 !important;
}
}
/* SZ 2025-11-16 — Mobile breadcrumbs squared (keep Big/Medium rounded) */
@media screen and (max-width: 720px) {
#main_content_section .navigate_section,
#main_content_section .navigate_section ul {
border-radius: 0 !important;
}
}
/* SZ 2025-11-18 — Small only: inline topic-viewing text + Reply button */
@media screen and (max-width: 720px) {
/* SZ 2025-12-05 — Mobile: temporarily hide inline topic viewing row */
#display_head p.sz_topic_viewing {
display: none !important;
margin-top: 0;
}
#display_head p.sz_topic_viewing .sz_mobile_reply_button {
margin-left: auto;
display: inline-flex;
}
/* Hide breadcrumb Reply button on Small so we only show the inline one */
#main_content_section .navigate_section .sz_breadcrumb_action {
display: none !important;
}
/* Hide old mobile strip Reply so only new one shows on Small */
.pagesection.top .button_strip_reply {
display: none !important;
}
}
/* SZ 2025-11-18 — Mobile inline Reply button + hide on Big/Medium */
/* Hide the inline mobile Reply button on Big/Medium so only breadcrumb Reply shows */
@media (min-width: 721px) {
#display_head p.sz_topic_viewing .sz_mobile_reply_button {
display: none !important;
}
}
/* Small (≤720px): style inline Reply as Sonic Zone pill and keep only this one */
@media (max-width: 720px) {
#display_head p.sz_topic_viewing .sz_mobile_reply_button {
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 6px 16px;
border-radius: 20px;
border: 1px solid #ffffff;
background: transparent;
color: #ffffff;
font-family: "Berlin Sans FB", "Trebuchet MS", Arial, sans-serif;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.08em;
text-decoration: none !important;
white-space: nowrap;
}
#display_head p.sz_topic_viewing .sz_mobile_reply_button:hover,
#display_head p.sz_topic_viewing .sz_mobile_reply_button:focus {
color: #ffffff;
border-color: #ffffff;
background-color: rgba(240, 220, 2, 0.12);
text-decoration: none;
}
/* Ensure old mobile Reply strip is hidden so it doesn't duplicate */
.pagesection.top .button_strip_reply {
display: none !important;
}
}
/* SZ 2025-11-18 — Improved Mobile Reply Button */
/* Small only: replace mobile Reply with Sonic Zone pill and remove duplicates */
@media (max-width: 720px) {
/* Flex spacing for viewing + reply */
#display_head p.sz_topic_viewing {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 4px !important;
}
/* Style mobile reply exactly like desktop breadcrumb reply */
#display_head p.sz_topic_viewing .sz_mobile_reply_button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 6px 16px !important;
height: 32px !important;
border-radius: 20px !important;
border: 1px solid #FFFFFF !important;
background: transparent !important;
color: #FFFFFF !important;
font-family: "Berlin Sans FB","Trebuchet MS",Arial,sans-serif !important;
font-size: 14px !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
text-decoration: none !important;
white-space: nowrap !important;
}
#display_head p.sz_topic_viewing .sz_mobile_reply_button:hover {
color: #ffffff !important;
border-color: #ffffff !important;
background-color: rgba(240,220,2,0.12) !important;
}
/* Hide old mobile reply strip completely */
.pagesection.top .button_strip_reply {
display: none !important;
}
}
/* end sz mobile reply */
/* SZ 2025-11-18 — Mobile Reply Full Match */
@media (max-width: 720px) {
#display_head p.sz_topic_viewing .sz_mobile_reply_button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 6px 16px !important;
height: 32px !important;
border-radius: 6px !important;
background: #FCA322 !important;
border: 2px solid #A96A00 !important;
color: #FFFFFF !important;
font-family: "Berlin Sans FB","Trebuchet MS",Arial,sans-serif !important;
font-size: 14px !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
white-space: nowrap !important;
gap: 6px !important;
box-shadow:
0 0 4px rgba(0, 0, 0, 0.55);
text-shadow:
0 0 1px rgba(0,0,0,0.85),
0 0 2px rgba(0,0,0,0.85),
0 0 3px #BF7F13,
0 0 4px #BF7F13 !important;
}
#display_head p.sz_topic_viewing .sz_mobile_reply_button::before {
content: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
box-shadow: none !important;
}
#display_head p.sz_topic_viewing .sz_mobile_reply_button:hover,
#display_head p.sz_topic_viewing .sz_mobile_reply_button:focus {
background: #FFB738 !important;
border-color: #A96A00 !important;
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out !important;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.55) !important;
color: #FFFFFF !important;
}
}
/* end mobile reply full match */
/* SZ 2025-11-19 — SZ mobile search align + native scope chevron */
@media screen and (max-width: 720px) {
#mobile_user_menu .sz-mobile-search-heading {
/* nudge row slightly closer to left edge of popup */
padding: 4px 8px 4px 4px !important;
}
#mobile_user_menu .sz-mobile-search-form {
gap: 3px !important;
}
/* Turn the native select into a compact chevron button */
#mobile_user_menu .sz-mobile-search-form select[name="search_selection"] {
max-width: 38px !important;
min-width: 34px !important;
width: 34px !important;
height: 32px !important;
padding: 0 !important;
border-radius: 6px !important;
border: 1px solid #636363 !important;
background-color: transparent !important;
/* hide label text inside the closed control */
color: transparent !important;
text-indent: -9999px !important;
/* remove default arrows so we can draw our own */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-repeat: no-repeat;
background-position: center;
background-size: 14px 14px;
background-image: url("data:image/svg+xml;utf8,");
}
/* Keep dropdown options readable when the OS menu opens */
#mobile_user_menu .sz-mobile-search-form select[name="search_selection"] option {
color: #ffffff;
background: #202020;
}
#mobile_user_menu .sz-mobile-search-form select[name="search_selection"]:hover {
border-color: #FFFFFF !important;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45);
background-image: url("data:image/svg+xml;utf8,");
}
}
/* SZ 2025-11-19 — SZ mobile menu search refinements (no PHP changes) */
@media screen and (max-width: 720px) {
/* Hide 'Menu' label text but keep header + close icon */
#mobile_user_menu .popup_heading {
color: transparent;
}
/* Sonic-style search fields inside the mobile menu */
#mobile_user_menu input[type="search"],
#mobile_user_menu select[name="search_selection"] {
background: #252525;
color: #FFFFFF;
border: 1px solid #636363;
border-radius: 6px;
height: 32px;
font-size: 0.9em;
}
#mobile_user_menu input[type="search"] {
padding: 2px 8px;
}
/* Nudge row slightly left / tighter */
#mobile_user_menu input[type="search"],
#mobile_user_menu select[name="search_selection"],
#mobile_user_menu input[type="submit"] {
margin-left: 2px;
}
#mobile_user_menu input[type="search"] {
margin-left: 4px;
}
}
/* SZ 2025-11-19 — Mobile menu search: hide 'Menu' label + icon button */
@media screen and (max-width: 720px) {
/* Hide the 'Menu' text injected via ::before on the mobile popup heading */
#mobile_user_menu .popup_heading.sz-mobile-search-heading::before {
content: none !important;
}
/* Turn the SEARCH button into a magnifying-glass icon matching the scope button */
#mobile_user_menu .sz-mobile-search-form input[type="submit"] {
width: 34px !important;
min-width: 34px !important;
height: 32px !important;
padding: 0 !important;
border-radius: 6px !important;
border: 1px solid #636363 !important;
background-color: transparent !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 15px 15px !important;
/* hide the SEARCH text */
color: transparent !important;
text-indent: -9999px !important;
overflow: hidden !important;
/* magnifying-glass SVG */
background-image: url("data:image/svg+xml;utf8,");
}
#mobile_user_menu .sz-mobile-search-form input[type="submit"]:hover {
border-color: #FFFFFF !important;
background-image: url("data:image/svg+xml;utf8,");
}
}
/* SZ 2025-11-19 — Mobile search header centering + focus/hover */
@media screen and (max-width: 720px) {
/* Make the popup heading row span fully and center contents */
#mobile_user_menu .popup_heading.sz-mobile-search-heading {
display: flex;
align-items: center;
justify-content: center;
padding: 8px 12px !important;
margin: 0;
width: 100%;
box-sizing: border-box;
}
#mobile_user_menu .sz-mobile-search-shell {
flex: 1 1 auto;
}
#mobile_user_menu .sz-mobile-search-form {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 100%;
gap: 4px;
}
/* Let the text field fill the row */
#mobile_user_menu .sz-mobile-search-form input[type="search"] {
flex: 1 1 auto;
min-width: 0;
transition: border-color 0.18s ease-out, box-shadow 0.18s ease-out, background-color 0.18s ease-out, transform 0.12s ease-out;
}
/* Scope dropdown & search icon buttons share subtle hover motion */
#mobile_user_menu .sz-mobile-search-form select[name="search_selection"],
#mobile_user_menu .sz-mobile-search-form input[type="submit"] {
transition: border-color 0.18s ease-out, box-shadow 0.18s ease-out, transform 0.12s ease-out, background-color 0.18s ease-out;
box-shadow: none !important; /* remove any 3D edge */
}
#mobile_user_menu .sz-mobile-search-form select[name="search_selection"]:hover,
#mobile_user_menu .sz-mobile-search-form input[type="submit"]:hover {
transform: translateY(-1px);
}
/* Focus glow for the text field */
#mobile_user_menu .sz-mobile-search-form input[type="search"]:focus {
border-color: #FFFFFF !important;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
background-color: #262626;
}
}
/* SZ 2025-11-20 — Mobile menu text color overrides */
@media screen and (max-width: 720px) {
#mobile_user_menu .popup_window li > a {
color: #d0d0d0 !important;
transition: color 0.18s ease-in-out;
}
#mobile_user_menu .popup_window li > a:hover,
#mobile_user_menu .popup_window li > a:focus {
color: #ffffff !important;
}
#mobile_user_menu .dropmenu li > a {
color: #d0d0d0 !important;
}
#mobile_user_menu .dropmenu li > a:hover,
#mobile_user_menu .dropmenu li > a:focus {
color: #ffffff !important;
}
#mobile_user_menu .dropmenu li.subsections > a.sf-with-ul {
color: #d0d0d0 !important;
}
#mobile_user_menu .dropmenu li.subsections > a.sf-with-ul:hover {
color: #ffffff !important;
}
}
/* SZ 2025-11-20 — Mobile menu active/child links = white, not yellow */
@media screen and (max-width: 720px) {
/* Current page in main mobile menu (Home, Search, Admin, etc.) */
#mobile_user_menu .popup_window li > a.active,
#mobile_user_menu .dropmenu > li > a.active {
color: #ffffff !important;
font-weight: 700 !important;
}
#mobile_user_menu .popup_window li > a.active:hover,
#mobile_user_menu .popup_window li > a.active:focus,
#mobile_user_menu .dropmenu > li > a.active:hover,
#mobile_user_menu .dropmenu > li > a.active:focus {
color: #ffffff !important;
}
/* Child submenu rows (e.g., Features and Options) */
#mobile_user_menu .dropmenu li ul li > a {
color: #d0d0d0 !important;
}
#mobile_user_menu .dropmenu li ul li > a:hover,
#mobile_user_menu .dropmenu li ul li > a:focus {
color: #ffffff !important;
}
}
/* SZ 2025-11-20 — Mobile breadcrumbs chevron spacing tighter */
@media screen and (max-width: 720px) {
#main_content_section > div:nth-child(1) > ul > li > .dividers {
padding: 0 2px 0 3px !important;
}
}
@media screen and (max-width: 720px) {
#main_content_section > div:nth-child(1) > ul > li:nth-child(1) > a {
position: relative;
top: 1px;
}
}
/* SZ 2025-11-20 — MOBILE HOME BREADCRUMBS BUTTON POSITION / NUDGE */
@media screen and (max-width: 720px) {
#main_content_section .navigate_section ul li:first-child > a::before {
position: relative;
top: 3px;
}
}
/* SZ 2025-11-21 — Tighten breadcrumb to display_head on Mobile */
@media screen and (max-width: 720px){
.navigate_section{
margin-top: 0 !important;
margin-bottom: 0 !important;
min-height: 40px !important;
display: flex !important;
align-items: center !important;
}
#main_content_section .navigate_section ul{
display: flex !important;
align-items: center !important;
width: 100%;
}
#display_head{
margin-top: 0 !important;
}
}
/* SZ 2025-11-21 — Mobile-only Info Center fix */
@media screen and (max-width: 720px){
#info_center h3.titlebg {
color: #ffffff !important;
background: #44359d !important;
border-radius: 7px 7px 0 0 !important;
margin-top: 0 !important;
padding: 11px 12px 7px 12px !important;
text-align: center !important;
}
#upshrink_link{
color: #ffffff !important;
}
}
/* SZ 2025-11-22 — Increase spacing above #top > img by 4px on Mobile (Small) */
@media (max-width: 720px) {
#top > img {
margin-top: 4px;
}
}
/* SZ 2025-11-22 — Desktop/Tablet: extra spacing above main header title */
@media (min-width: 721px) {
#header > h1 {
margin-top: 4px;
}
}
/* SZ 2025-11-24 — Info Center recent posts + borders on Mobile (Small) */
@media (max-width: 720px) {
/* Match Desktop/Tablet padding for recent posts */
#ic_recentposts td.recentpost,
#ic_recentposts th.recentpost {
padding-left: 10px !important;
}
/* Remove side/top borders around the Info Center bar */
#info_center {
border-top: none !important;
border-left: none !important;
border-right: none !important;
}
}
/* SZ 2025-11-24 — Info Center mobile stretch + border removal */
@media (max-width: 720px) {
/* Stretch purple title bar full-width and remove its border/radius */
#info_center h3.titlebg {
width: 100% !important;
margin: 0 !important;
border: none !important;
border-radius: 0 !important;
}
/* Remove borders/shadows on the Info Center container */
#info_center {
border: none !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Ensure inner wrappers don't reintroduce borders or shrink width */
#info_center > div {
border: none !important;
box-shadow: none !important;
margin: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
width: 100% !important;
}
}
/* SZ 2025-11-25 — Show Sign in / Register text on Tablet (M) */
@media (min-width: 721px) and (max-width: 855px) {
#top_info > li.button_login a .textmenu,
#top_info > li.button_signup a .textmenu {
display: inline-block;
margin-left: 4px;
}
}
/* SZ 2025-11-25 — Show Sign in / Register text on Small top bar */
@media screen and (max-width: 720px) {
#top_info > li.button_login > a .textmenu,
#top_info > li.button_signup > a .textmenu {
display: inline-block !important;
margin-left: 4px;
}
}
/* SZ 2025-11-25 — Tablet vertical centering of logo + menu - SONIC ZONE LOGO + MENU GROUPED TOGETHER */
@media (min-width: 721px) and (max-width: 1079px) {
#top > img,
#main_menu {
transform: translateY(-20px);
}
}
/* SZ 2025-11-25 — Mobile only: hide top-bar text labels, keep icons */
@media screen and (max-width: 720px) {
#profile_menu_top .textmenu,
#pm_menu_top .textmenu,
#alerts_menu_top .textmenu {
display: none;
}
#pm_menu_top .main_icons,
#alerts_menu_top .main_icons {
display: inline-block;
}
}
/* SZ 2025-11-25 — Desktop/Tablet: always show custom icons next to Messages & Alerts text */
@media screen and (min-width: 721px) {
/* Ensure top-bar PM + Alerts icons are visible and use SVG instead of SMF sprites */
#pm_menu_top .main_icons.inbox,
#alerts_menu_top .main_icons.alerts {
display: inline-block !important;
margin-right: 4px;
background: none !important;
}
}
/* SZ 2025-11-25 — Tablet (721–854px): restore SMF top-bar icons, remove mobile SVGs */
@media screen and (min-width: 721px) and (max-width: 854px) {
/* Keep avatar visible like desktop */
#top_info > li:first-child img.avatar {
display: inline-block !important;
}
/* Remove custom SVG ::before icons so SMF sprites can show */
#top_info > li:first-child > a::before,
#top_info span.main_icons.inbox::before,
#top_info span.main_icons.alerts::before {
content: none !important;
background: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
box-shadow: none !important;
filter: none !important;
}
/* Ensure the original SMF envelope + bell backgrounds are used */
#top_info span.main_icons.inbox,
#top_info span.main_icons.alerts {
display: inline-block !important;
background-position: left center !important;
}
}
/* SZ 2025-11-25 — Unify top bar padding to avoid 720px jump */
@media screen and (min-width: 721px) {
#top_info {
padding: 5px !important;
}
}
/* SZ 2025-11-25 — FINAL: use SMF sprites for top-bar icons on all >=721px */
@media screen and (min-width: 721px) {
/* Ensure avatar always visible like desktop */
#top_info > li:first-child img.avatar {
display: inline-block !important;
}
/* Completely remove custom SVG pseudo-icons on profile / messages / alerts */
#top_info > li:first-child > a::before,
#top_info span.main_icons.inbox::before,
#top_info span.main_icons.alerts::before {
content: none !important;
background: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
box-shadow: none !important;
filter: none !important;
}
/* Make sure the original SMF sprites can show on the actual spans */
#top_info span.main_icons.inbox,
#top_info span.main_icons.alerts {
display: inline-block !important;
background-repeat: no-repeat !important;
background-position: left center !important;
}
}
/* SZ 2025-11-25 — Final override: restore SMF sprites for Messages/Notifications on Tablet/Desktop */
@media screen and (min-width: 721px) {
#pm_menu_top .main_icons.inbox,
#alerts_menu_top .main_icons.alerts {
display: inline-block !important;
margin-right: 4px;
background: revert !important; /* undo earlier background:none so theme sprites show */
}
}
/* SZ 2025-11-25 — FINAL: mobile-style icons for Messages & Alerts on ALL sizes, no 720px jump */
#pm_menu_top > span.main_icons.inbox,
#alerts_menu_top > span.main_icons.alerts {
display: inline-block !important;
margin-right: 6px !important;
padding: 0 !important;
background: none !important;
vertical-align: middle !important;
}
/* Envelope icon (all sizes) */
#pm_menu_top > span.main_icons.inbox::before {
content: "" !important;
display: inline-block !important;
width: 22px !important;
height: 22px !important;
margin-right: 0 !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 22px 22px !important;
background-image: url("data:image/svg+xml;utf8,") !important;
}
/* Bell icon (all sizes) */
#alerts_menu_top > span.main_icons.alerts::before {
content: "" !important;
display: inline-block !important;
width: 22px !important;
height: 22px !important;
margin-right: 0 !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 22px 22px !important;
background-image: url("data:image/svg+xml;utf8,") !important;
}
/* === SZ 2025-11-25 — Top bar icon alignment + color consistency === */
/* Nudge inbox + alerts icons UP slightly across all desktop/tablet */
#top_info span.main_icons.inbox::before,
#top_info span.main_icons.alerts::before,
#top_info > li:first-child > a::before {
transform: translateY(-2px) !important;
}
/* FORCE consistent icon color (the light-gray mobile icons) 720px+ */
@media (min-width: 720px) {
#top_info span.main_icons.inbox::before,
#top_info span.main_icons.alerts::before,
#top_info > li:first-child > a::before {
filter: none !important;
opacity: 0.65 !important; /* same tone as your mobile */
}
/* Hover = brighten (but NOT pure white like SMF default) */
#top_info span.main_icons.inbox:hover::before,
#top_info span.main_icons.alerts:hover::before,
#top_info > li:first-child > a:hover::before {
opacity: 1 !important;
}
}
/* === SZ 2025-11-25 — Small: nudge profile/user icon down === */
@media (max-width: 720px) {
#top_info > li:first-child > a::before {
transform: translateY(0px) !important;
}
}
/* SZ S/M/B RESPONSIVE SCAFFOLD
------------------------------------------------------------------
NOTE:
- Desktop (Big) is the default baseline (index.css + global rules).
- Use ONLY these three blocks for NEW responsive changes:
* Small (S): 0–720px
* Medium (M): 721–1079px
* Big (B): 1080px+
- Do NOT add any new media queries outside these three.
------------------------------------------------------------------ */
/* Small (S) — Mobile: 0–720px */
@media screen and (max-width: 720px) {
/* Place NEW mobile-only overrides here. */
/* SZ 2025-12-02 — Small: sub-board list scroll area + scroll hint */
#boardindex_table .children.sz_subboard_container .sz_subboard_children {
max-height: 40vh;
overflow-y: auto;
padding-right: 2px;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge legacy */
}
#boardindex_table .children.sz_subboard_container .sz_subboard_children::-webkit-scrollbar {
display: none; /* WebKit */
}
/* Fade logic driven by scroll position classes from JS */
/* At top: only bottom fade */
#boardindex_table .children.sz_subboard_container.sz_subboard_fade_bottom .sz_subboard_children {
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
}
/* At bottom: only top fade */
#boardindex_table .children.sz_subboard_container.sz_subboard_fade_top .sz_subboard_children {
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,1) 100%);
mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,1) 100%);
}
/* SZ 2025-11-26 — Small: vertically center top-bar user / messages / alerts icons */
#top_info #profile_menu_top > a,
#top_info #pm_menu_top > a,
#top_info #alerts_menu_top > a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* SZ 2025-11-26 — Small: remove extra right margin so PM/Alerts icons center inside pills */
@media screen and (max-width: 720px) {
#pm_menu_top > span.main_icons.inbox,
#alerts_menu_top > span.main_icons.alerts {
margin-right: 0 !important;
}
}
}
/* Medium (M) — Tablet: 721–1079px */
@media screen and (min-width: 721px) and (max-width: 1079px) {
/* Place NEW tablet-only overrides here. */
}
/* Big (B) — Desktop+: 1080px and up */
@media screen and (min-width: 1080px) {
/* Place NEW desktop-only overrides here (if needed). */
}
/* SZ — Mobile-only background swap */
@media (max-width: 720px) {
body::before {
background-image: url("https://soniczone.net/forum/Themes/default/images/bgcheckermed.png") !important;
background-size: auto !important;
}
}
/* SZ 2025-11-25 — Mobile-only background: bgchecker_mobile + faster animation */
@media screen and (max-width: 720px) {
body::before {
background-image: url("https://soniczone.net/forum/Themes/default/images/bgchecker_mobile.png") !important;
position: fixed !important;
animation: diagonal 60s linear infinite !important;
animation-delay: var(--sz-diagonal-offset, 0s) !important;
}
}
/* SZ 2025-11-26 — Desktop/Tablet: breadcrumb vertical tweak (move down slightly) */
@media (min-width: 721px) {
#main_content_section .navigate_section ul li > a > span,
#main_content_section .navigate_section ul li > span.dividers {
position: relative;
top: 2px; /* move breadcrumb text + chevrons down slightly on Desktop/Tablet */
}
}
/* ==============================
SZ — MOBILE INBOX ICON NUDGE
============================== */
/* MOBILE MESSAGES ICON VERTICAL ADJUSTMENT */
@media screen and (max-width: 720px) {
#pm_menu_top > span.main_icons.inbox::before {
transform: translateY(-1px) !important; /* + = move down, - = move up */
}
}
/* MOBILE BELL ICON VERTICAL ADJUSTMENT */
@media screen and (max-width: 720px) {
/* Notifications (bell) */
#top_info span.main_icons.alerts::before {
transform: translateY(-2px) !important;
}
}
/* SZ 2025-11-29 — Desktop/Tablet breadcrumb text nudge (exclude Reply pill) */
@media (min-width: 721px) {
#main_content_section .navigate_section ul li a span:not(.sz_breadcrumb_action) {
transform: translateY(-2px);
}
}
/* SZ 2025-11-29 — Desktop/Tablet search bar + button vertical nudge */
@media (min-width: 721px) {
#search_form input[type="search"],
#search_form input.button {
transform: translateY(2px);
}
}
/* SZ 2025-11-29 — Mobile Quick Reply polish (Small screens) */
@media (max-width: 720px) {
/* Softer quick reply card on mobile */
#quickreply_options .roundframe {
margin: 8px 2px 12px;
padding: 10px 10px 12px;
border-radius: 12px;
box-shadow: 0 10px 26px rgba(10, 12, 30, 0.65);
background: #f7f7fc;
}
/* Editor looks more app-like, less boxy */
#quickreply .sceditor-container {
border-radius: 10px;
}
/* Tighter toolbar layout on small width */
#quickreply .sceditor-toolbar {
display: flex;
flex-wrap: wrap;
row-gap: 2px;
}
/* Compact modern smiley strip */
#smileyBox_message {
margin: 6px 0 4px;
padding: 4px 2px;
max-height: 44px;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
gap: 3px;
}
#smileyBox_message img {
width: 20px;
height: 20px;
padding: 1px;
border-radius: 4px;
}
/* Preview / Post buttons cleaner on mobile */
#quickreply_options .buttonlist {
display: flex;
justify-content: flex-end;
gap: 6px;
margin-top: 10px;
}
#quickreply_options .buttonlist .button {
min-width: 88px;
}
}
/* SZ 2025-11-29 — Mobile Quick Reply polish (Small screens) */
@media (max-width: 720px) {
/* Softer quick reply card on mobile */
#quickreply_options .roundframe {
margin: 8px 2px 12px;
padding: 10px 10px 12px;
border-radius: 12px;
box-shadow: 0 2px 4px rgba(0,0,0,0.25);
background: #f7f7fc;
}
/* Editor looks more app-like, less boxy */
#quickreply .sceditor-container {
border-radius: 10px;
}
/* Tighter toolbar layout on small width */
#quickreply .sceditor-toolbar {
display: flex;
flex-wrap: wrap;
row-gap: 2px;
}
/* Compact modern smiley strip */
#smileyBox_message {
margin: 6px 0 4px;
padding: 4px 2px;
max-height: 44px;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
gap: 3px;
}
#smileyBox_message img {
width: 20px;
height: 20px;
padding: 1px;
border-radius: 4px;
}
/* Preview / Post buttons cleaner on mobile */
#quickreply_options .buttonlist {
display: flex;
justify-content: flex-end;
gap: 6px;
margin-top: 10px;
}
#quickreply_options .buttonlist .button {
min-width: 88px;
}
}
/* SZ 2025-11-30 — Mobile (S <= 720px) eye icon vertical tweak */
@media screen and (max-width: 720px) {
#display_head > p.sz_topic_viewing > span > svg > path {
transform: translateY(-3px) !important;
}
}
/* SZ 2025-11-30 — Mobile pagination above action buttons */
@media screen and (max-width: 720px) {
#main_content_section > div.pagesection.top.sz_top_actions > div.pagelinks.floatleft {
float: none !important;
display: block !important;
width: 100% !important;
margin: 0 0 6px 0 !important; /* small gap above buttons */
}
}
/* SZ 2025-12-01 — Mobile order: buttons row above pagination */
@media screen and (max-width: 720px) {
/* Stack container vertically and control order */
#main_content_section > div.pagesection.top.sz_top_actions {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 6px !important;
}
/* Buttons row FIRST */
#main_content_section > div.pagesection.top.sz_top_actions > div.mobile_buttons.floatright {
order: 1 !important;
width: 100% !important;
}
/* Pagination SECOND, on its own line below buttons */
#main_content_section > div.pagesection.top.sz_top_actions > div.pagelinks.floatleft {
order: 2 !important;
width: 100% !important;
margin: 0 !important;
}
}
/* SZ 2025-12-01 — Mobile mark unread icon + hide add poll */
@media screen and (max-width: 720px) {
/* Hide Add Poll button on mobile (S) */
#main_content_section .button_strip_add_poll {
display: none !important;
}
/* Square SVG icon style for Mark Unread button on mobile */
#main_content_section > div.pagesection.top.sz_top_actions a.button.button_strip_mark_unread {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 32px !important;
height: 32px !important;
padding: 0 !important;
border-radius: 6px !important;
font-size: 0 !important; /* hide text */
line-height: 0 !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.18);
border: 1px solid #000000;
background: linear-gradient(180deg, #f6f6f6 0%, #e9e9e9 100%);
margin-left: 6px;
}
#main_content_section > div.pagesection.top.sz_top_actions a.button.button_strip_mark_unread::before {
content: "";
display: block;
width: 18px;
height: 18px;
background-repeat: no-repeat;
background-position: center;
background-size: 18px 18px;
/* Envelope SVG icon */
background-image: url("data:image/svg+xml;utf8,");
}
}
/* SZ 2025-12-01 — Mobile topic actions: only User Actions + Moderation */
@media screen and (max-width: 720px) {
/* Hide desktop-style topic strip buttons on mobile again */
.pagesection.top .buttonlist,
.pagesection .buttonlist {
display: none !important;
}
/* Hide standalone Add Poll + Mark Unread buttons in mobile strip */
.mobile_buttons_floatright a.button_strip_add_poll,
.mobile_buttons_floatright a.button_strip_mark_unread {
display: none !important;
}
/* Hide any standalone Mark Unread button in the top actions row on Small */
#main_content_section > div.pagesection.top.sz_top_actions a.button.button_strip_mark_unread {
display: none !important;
}
/* Ensure User Actions popup shows full set again, including Add Poll + Mark Unread */
#mobile_action .notify_dropdown a, #mobile_moderation .notify_dropdown a {
display: block !important;
}
}
/* SZ 2025-12-01 — Mobile actions popup heading align + color */
@media screen and (max-width: 720px) {
/* User actions popup heading text color */
#mobile_action .popup_heading {
position: relative;
color: #a3a3a3 !important;
}
/* Align the X icon with the heading text — share white SVG between User actions and Moderation */
#mobile_action .popup_heading a.main_icons.hide_popup,
#mobile_moderation .popup_heading a.main_icons.hide_popup {
position: absolute !important;
top: 7px !important;
right: 2px !important;
transform: none !important;
/* Force white SVG X instead of red sprite */
width: 20px;
height: 20px;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 16px 16px !important;
text-indent: -9999px;
background-image: url("data:image/svg+xml;utf8,");
}
}
/* === SZ — Force User Actions popup above all UI elements === */
@media (max-width: 720px) {
/* Popup overlay container */
#mobile_action.popup_container, #mobile_moderation.popup_container {
position: fixed !important;
z-index: 9999 !important;
}
/* The actual window/card */
#mobile_action .popup_window, #mobile_moderation .popup_window {
position: relative !important;
z-index: 10000 !important;
}
}
/* SZ 2025-11-30 — Mobile row Reply button: reuse full orange styling + push to right */
@media (max-width: 720px) {
/* Layout: keep actions left, push Reply to far right in the row */
#display_head .mobile_buttons {
display: flex !important;
align-items: center !important;
}
#display_head .mobile_buttons .button {
margin-right: 6px;
}
/* SZ 2025-12-03 — S: MOD / Actions buttons match sub-board pill style + global animation */
#display_head .mobile_buttons .button:not(.sz_mobile_reply_row) {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 6px 14px !important;
height: 32px !important;
border-radius: 6px !important;
border: 1px solid #d4d0ff !important;
background: linear-gradient(#ffffff, #eff7ff);
font-size: 0.82rem !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
font-weight: 700 !important;
color: #070072;
box-shadow: 0 1px 2px rgba(31, 42, 65, 0.16) !important;
gap: 6px !important;
}
#display_head .mobile_buttons .button:not(.sz_mobile_reply_row):hover {
border-color: #b7b0ff !important;
box-shadow: 0 2px 4px rgba(31, 42, 65, 0.24) !important;
}
#display_head .mobile_buttons .sz_mobile_reply_row {
margin-left: auto;
}
/* Style row Reply exactly like the mobile full-match button */
#display_head .mobile_buttons .sz_mobile_reply_row {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 6px 16px !important;
height: 32px !important;
border-radius: 6px !important;
background: #FCA322 !important;
border: 2px solid #A96A00 !important;
color: #FFFFFF !important;
font-family: "Berlin Sans FB","Trebuchet MS",Arial,sans-serif !important;
font-size: 14px !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
white-space: nowrap !important;
gap: 6px !important;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.55);
text-shadow:
0 0 1px rgba(0,0,0,0.85),
0 0 2px rgba(0,0,0,0.85),
0 0 3px #BF7F13,
0 0 4px #BF7F13 !important;
}
#display_head .mobile_buttons .sz_mobile_reply_row:hover,
#display_head .mobile_buttons .sz_mobile_reply_row:focus {
background: #FFB738 !important;
border-color: #A96A00 !important;
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out !important;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.55) !important;
color: #FFFFFF !important;
}
}
/* SZ 2025-11-30 — Mobile breadcrumb Reply = std button small w/ orange CTA */
@media (max-width: 720px) {
#display_head > div > a.sz_breadcrumb_reply.sz_mobile_reply_button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 4px 12px !important;
min-height: 26px !important;
border-radius: 4px !important; /* std button small: less round */
background: #FCA322 !important;
border: 1px solid #A96A00 !important;
color: #FFFFFF !important;
font-family: "Berlin Sans FB","Trebuchet MS",Arial,sans-serif !important;
font-size: 13px !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
white-space: nowrap !important;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.45);
text-decoration: none !important;
}
#display_head > div > a.sz_breadcrumb_reply.sz_mobile_reply_button:hover,
#display_head > div > a.sz_breadcrumb_reply.sz_mobile_reply_button:focus {
background: #FFB738 !important;
border-color: #A96A00 !important;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.55);
color: #FFFFFF !important;
text-decoration: none !important;
}
}
/* SZ 2025-11-30 — Mobile: move inline Reply to the far right */
@media screen and (max-width: 720px) {
#display_head .mobile_buttons_group {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 6px !important;
width: 100%;
}
/* Push reply to the far right */
#display_head .sz_mobile_reply_button {
margin-left: auto !important;
}
}
/* SZ 2025-11-30 — tighten spacing between Actions + Moderation on S */
@media screen and (max-width: 720px) {
#display_head .mobile_buttons > .button.mobile_act,
#display_head .mobile_buttons > .button.mobile_mod {
margin-right: 1px !important;
}
}
/* SZ 2025-12-01 — Mobile: icon styling for Actions/Moderation buttons */
@media screen and (max-width: 720px) {
#display_head .mobile_buttons .sz_icon {
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 4px;
}
#display_head .mobile_buttons .sz_icon svg {
width: 14px;
height: 14px;
}
#display_head .mobile_buttons .sz_icon_plus_svg path,
#display_head .mobile_buttons .sz_icon_gavel_svg path {
stroke: #d0d0d0;
}
}
/* SZ — Update Actions/Moderation SVG icon color */
@media screen and (max-width: 720px) {
#display_head .mobile_buttons .sz_icon_plus_svg path,
#display_head .mobile_buttons .sz_icon_gavel_svg path {
stroke: #3f3f3f !important;
}
}
/* SZ 2025-12-01 — Final icon color override for Actions/Moderation (mobile) */
@media screen and (max-width: 720px) {
#display_head .mobile_buttons .sz_icon_plus_svg path,
#display_head .mobile_buttons .sz_icon_gavel_svg path {
stroke: currentColor !important;
fill: currentColor !important;
}
}
@media screen and (max-width: 720px) {
html.sz-anim-ready #display_head .mobile_buttons a.button.mobile_act {
color: #070072 !important;
}
}
/* SZ 2025-11-30 — Mobile Moderation popup heading + X to match User actions */
@media (max-width: 720px) {
/* Match heading text color to User actions */
#mobile_moderation > div > div.popup_heading {
position: relative;
color: #a3a3a3 !important;
}
/* Fine-tune X icon for Moderation popup on mobile */
#mobile_moderation > div > div.popup_heading > a.main_icons.hide_popup {
top: 9px !important; /* slightly lower */
right: 8px !important; /* slightly more inset */
width: 22px !important;
height: 22px !important;
background-size: 22px 22px !important;
}
}
/* ============================================
SZ — FINAL MOBILE VIEWING TEXT SPACING
============================================ */
@media screen and (max-width: 720px) {
#display_head p.sz_topic_viewing {
padding-top: 18px !important; /* tweak this number */
}
}
/* --- SZ 2025-12-05 — Mobile pagination micro-alignment override --- */
@media screen and (max-width: 720px) {
#display_head > div.pagesection.top.sz_top_actions > div.pagelinks.floatleft > span.current_page {
transform: translateY(-4px) !important;
}
}
/* SZ 2025-12-05 — FINAL Mobile override: hide topic viewing row on Small only */
@media screen and (max-width: 720px) {
#display_head p.sz_topic_viewing {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
}
/* SZ 2025-12-05 — Mobile: extra spacing above pagination */
@media screen and (max-width: 720px) {
#display_head > div.pagesection.top.sz_top_actions > div.pagelinks {
margin-top: 15px !important;
}
}
/* SZ 2025-12-05 — Mobile: post quickbuttons in one row + taller */
@media screen and (max-width: 720px) {
#forumposts .quickbuttons {
display: flex !important;
flex-wrap: nowrap !important;
gap: 6px !important;
}
#forumposts .quickbuttons li {
flex: 0 1 auto !important;
}
#forumposts .quickbuttons li a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 34px !important; /* ~5px taller than previous */
padding-top: 6px !important;
padding-bottom: 6px !important;
}
}
/* SZ 2025-12-05 — Mobile: center quickbuttons row */
@media screen and (max-width: 720px) {
#forumposts .quickbuttons {
justify-content: center !important;
text-align: center !important;
width: 100% !important;
}
}
/* SZ 2025-12-05 — Topic post cards (Mobile) */
@media screen and (max-width: 720px) {
#forumposts .windowbg,
#forumposts .windowbg2 {
width: 100%;
float: none;
margin: 0 0 18px 0;
padding: 0;
border-radius: 10px;
background: linear-gradient(#ffffff, #f5f7ff);
border: 1px solid rgba(173, 186, 231, 0.7);
box-shadow: 0 4px 14px rgba(10, 16, 37, 0.18);
}
#forumposts .post_wrapper {
padding: 10px 10px 12px 10px;
}
#forumposts .keyinfo .postinfo {
padding: 1px 0 5px 0;
font-size: 0.84rem;
font-weight: 500;
color: #6b7293;
}
#forumposts .inner {
padding: 10px 2px 10px 0;
margin: 4px 0 0 0;
border-top: 1px solid rgba(191, 199, 233, 0.9);
font-size: 0.96rem;
line-height: 1.6;
}
#forumposts .quickbuttons {
margin-top: 8px;
}
#forumposts .quickbuttons > li > a {
display: inline-block;
margin: 0 4px 4px 0;
padding: 3px 12px;
border-radius: 999px;
font-size: 0.7rem;
text-transform: uppercase;
background: linear-gradient(#f7f8ff, #e6e7fb);
border-color: rgba(46, 54, 134, 0.85);
box-shadow: 0 2px 4px rgba(17, 24, 72, 0.15);
}
}
/* --- SZ Mobile Signature Toggle Final --- */
@media screen and (max-width: 720px) {
/* Collapsed: button only, no extra gray block behind */
#forumposts .signature {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin-top: 12px;
}
#forumposts .signature .sz_sig_toggle_bar {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 8px 12px;
margin: 0;
background: linear-gradient(#f5f5f5, #e2e2e2);
border: 1px solid #c9c9c9;
border-radius: 8px;
cursor: pointer;
color: #777;
font-size: 0.85rem;
}
/* Kill the little gray block behind the label/arrow */
#forumposts .signature .sz_sig_toggle_label,
#forumposts .signature .sz_sig_toggle_chevron {
background: transparent;
padding: 0;
margin: 0;
}
#forumposts .signature .sz_sig_toggle_label {
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
}
#forumposts .signature .sz_sig_toggle_chevron {
margin-left: 6px;
border-width: 4px 4px 0 4px;
border-style: solid;
border-color: #777 transparent transparent transparent;
transition: transform .25s;
}
#forumposts .signature.sz-sig-open .sz_sig_toggle_chevron {
transform: rotate(180deg);
}
/* Expanded: darker button, flush border into body */
#forumposts .signature.sz-sig-open .sz_sig_toggle_bar {
background: linear-gradient(#d0d0d0, #b5b5b5);
border-color: #9a9a9a;
border-radius: 8px 8px 0 0;
}
#forumposts .signature .sz_sig_body {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height .25s ease, opacity .25s ease;
margin: 0;
border: 1px solid #c9c9c9;
border-top: none;
border-radius: 0 0 8px 8px;
background: #fafafa;
padding: 0 12px;
}
#forumposts .signature.sz-sig-open .sz_sig_body {
max-height: 3000px;
opacity: 1;
padding: 10px 12px;
}
}
/* Desktop/Tablet = no toggle, always visible */
@media screen and (min-width: 721px) {
#forumposts .signature .sz_sig_toggle_bar {
display: none !important;
}
#forumposts .signature .sz_sig_body {
max-height: none !important;
opacity: 1 !important;
padding: 0 !important;
border: none !important;
background: none !important;
}
}
/* --- FINAL SIGNATURE FIX PATCH (MOBILE ONLY) --- */
@media screen and (max-width: 720px) {
/* REMOVE GAP between button + expanded content */
#forumposts .signature .sz_sig_body {
margin-top: 0 !important;
}
/* DARKER expanded background */
#forumposts .signature.sz-sig-open .sz_sig_toggle_bar {
background: linear-gradient(#cacaca, #b0b0b0) !important;
border-color: #8e8e8e !important;
color: #555 !important;
}
/* Make toggle label and arrow match darker state */
#forumposts .signature.sz-sig-open .sz_sig_toggle_label {
color: #555 !important;
}
#forumposts .signature.sz-sig-open .sz_sig_toggle_chevron {
border-color: #555 transparent transparent transparent !important;
}
/* Make expanded content border continuous under button */
#forumposts .signature.sz-sig-open .sz_sig_body {
border-top: none !important;
border-color: #8e8e8e !important;
}
}
/* --- FINAL PATCH: Remove gray block behind SIGNATURE text --- */
@media screen and (max-width: 720px) {
/* Remove background on label + arrow always */
#forumposts .signature .sz_sig_toggle_label,
#forumposts .signature .sz_sig_toggle_chevron {
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
}
/* Ensure the toggle bar controls look clean and centered */
#forumposts .signature .sz_sig_toggle_bar {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 6px !important;
}
}