Z PARENT.less

Z_PARENT.less is inserted into each style's PAGE_CONTAINER and used instead of extra.less to provide css content that needs to be common to all child styles.

Current contents:

// DO NOT ALTER THIS FILE AT CHILD SKIN LEVEL
// ^^^^ LOOK AT THE STYLE DROP DOWN ABOVE YOU ^^^^
// IF IT DOES NOT SAY "PARENT_ONLY"
// DO NOT ALTER THIS FILE!
// FOR ALTERATIONS TO INDIVIDUAL SKINS USE zzCHILD.less

// START common changes for all skins
// ***** START UNIVERSAL FORMATTING CSS FOR ALL STYLES *****

// Remove user title from postbit
.message-userTitle {
  display: none;
}

//limits sig size  GED 5.1.2025
.message-signature .bbWrapper
{
    max-height: 150px;
    overflow-y: auto;
}

//places sig at the bottom of the post - GED 5.1.2025
.message-content
{
    display: flex;
    flex-direction: column;
  .message-signature
  {
      margin-top: auto;
  }
}

// padding at bottom of message in threads - Mak 5.12.2025
.message-body {
  padding-bottom: 15px;
}

// increase visibility of award feature button - Mak 5.12.2025
.badgeItem .featureIcon {
  opacity: 1;
}
.badgeItem .featureIcon--featured {
  font-size: 15px;
}

//spacing of featured badges in postbit - GED 5.26.2025
.featuredBadges {
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: repeat(auto-fit, 22px);
    gap: 10px;
    margin-top: 5px;
}
// fix badge max sizes - Mak 5.31.2025
.featuredBadges--message .badgeIcon {
  max-width: 35px;
  max-height: 35px;
}
.featuredBadges--member_tooltip .badgeIcon, .featuredBadges--member_view .badgeIcon {
  max-width: 25px;
  max-height: 25px;
}
// Side-bar scrolling widget fix - as per SirAdrian - Mak 5.20.2025
@media (min-width: 480px) {
    .carousel-footer {
        margin-top:var(--f-carousel-dots-height);
        text-align: center;
    }
    .p-body-pageContent {
        .carousel-footer {
        margin-top: 0;
        float: right;
        }
    }
}

//hr fix
.bbWrapper hr {
  border-top: 1px solid @xf-textColor;
}

// add margin below top ad-box (<br> removed from _ads template due to grid issues)
.ad-box-content-above { margin-bottom: 15px; }

// fix to sidebar widgets when in 2 columns under content in responsive mode - 
// moves site news down so advert and br end up at the top
@media (max-width: @xf-responsiveWide) and (min-width: 720px) {
	.p-body-sidebar { display: grid; grid-template-columns: 50% 50%;}	
	[data-widget-key="site_news"] { grid-row: 2;}
}

// ***** END UNIVERSAL FORMATTING FOR ALL STYLES SECTION *****

// ***** START UNIVERSAL THINGS WE WANT TO HIDE SECTION *****
// competition stuff 2327 is photo contests, 2329 is writing add other nodes if needed
[data-container-key="node-2327"], [data-container-key="node-2329"] {
// hides user names
    .message-signature,
    .message-cell--user,
    .reactionsBar-link,
    .reactionSummary {  display:none;}
// below this is to convert like buttons to 'vote' only and hide multiple options
    .reactTooltip { display: none;}   
    .message-actionBar {
        .actionBar-action.actionBar-action--reaction:not(.has-reaction) .reaction-text, .reaction-text {
        color: transparent;
         }
        .reaction.reaction--imageHidden.reaction--1 i::before {
        display:none;
        }
        .reaction-image.reaction-image--emoji.js-reaction {
        display:none;
        }
        .actionBar-action--reaction.has-reaction.reaction--1 {
            .reaction-text::after {
            content:"Remove Vote";
            visibility: visible;
            color: @xf-textColorAttention;
            font-size: 110%;
            margin-right: 20px;
            }
        }
        .reaction-text::after {
        content:"Vote for this Option";
        visibility: visible;
        color: @xf-textColorAttention;
        font-size: 110%;
        margin-right: 20px;
        }
    } // end .message-actionBar
} // end of data container for contests

// ***** END UNIVERSAL THINGS WE WANT TO HIDE SECTION *****


// START adjustments for various screen sizes
// shunt everything over to allow scroll arrows to fit in margin on standard/wide screens
@media (min-width: 100px) { // just to avoid using max-width and getting a weird overlap with next min-wdith
		.u-scrollButtons, .has-hiddenscroll .u-scrollButtons { right: 5px; } // so they're 5 from edge of screen (no padding)
}
@media (min-width: @xf-responsiveMedium ) { // 15px = -5 inside content once the page padding is back
		.u-scrollButtons, .has-hiddenscroll .u-scrollButtons { right: 15px; } // so they're 5 in from of content with 10 padding and switch at 1440
}
@media (min-width: 1440px) {	
	.p-footer-inner,
	.p-nav-inner,
	.p-body-inner,
	.p-header-inner,
	.p-staffBar-inner,
	.p-sectionLinks-inner, { 
		padding-right: 41px; padding-left: 41px;
	}
	.u-scrollButtons { right: 5px; } // so they're back to 5 in from edge and sitting in the 41px padding
	.p-body-main--withSidebar .p-body-content { padding-right: 10px; }
	.p-body-main--withSideNav .p-body-content { padding-left: 10px; }		
}
// balance up on the left side if you've got the space and increase inner padding
@media (min-width: 1920px) {	
	.p-body-main--withSidebar .p-body-content { padding-right: 25px; }
	.p-body-main--withSideNav .p-body-content { padding-left: 25px; }	
}
.p-body-main.p-body-main--withSideNav.p-body-main--withSidebar { // pages like What's new with both side cols
	@media (max-width: 1400px) {	
		.p-body-content { 
			.carousel-body.carousel-body--show2 { --xf-slidesPerPage: 1; }
		}
	}	
	// re-arrange the post list content in the zone where it's too wide and before responsive kicks in
	@media (max-width: 1400px) and (min-width:@xf-responsiveWide) { // 1440 gets normal view
		.structItem.structItem--thread { display:grid; grid-template-columns:52px auto 135px 32px; 
			.structItem-cell--meta { grid-column: 3 / -1; margin-right: 0px; margin-left: auto;}
			.structItem-cell.structItem-cell--latest { grid-row: 2; grid-column: 3; margin-right: 0px; margin-left: auto; padding-top: 0px; width: 130px;}
			.structItem-cell--iconEnd { grid-row: 2; grid-column: 4; padding-top: 0px;}
		}
	}
} 
// get who posted back on mobile
	@media (max-width: @xf-responsiveMedium) { 
		.structItem.structItem--thread { display:grid; grid-template-columns:52px auto auto 30px; 
			.structItem-cell--main { grid-column: 2 / -1; }
			.structItem-cell--meta { grid-row: 2; grid-column: 2 ; }
			.structItem-cell.structItem-cell--latest { grid-row: 2; grid-column: 3; }
			.structItem-cell--iconEnd { display: block; grid-row: 2; grid-column: 4; margin-right: 0px; margin-top: -10px; width: 30px; }
			.structItem-cell.structItem-cell--latest .structItem-minor { display: block; }
		}
	}
// END adjustments for various screen sizes

// FOOTER

.p-footer-row { display:grid; grid-template-columns:50% 50%; }
.p-footer-row::before {  grid-row: 1; grid-column: 1 / -1 ; } //no idea what is meant to be in this, its set as content blank and display:table in the app.less
.p-footer-row-2nd { grid-row: 2; grid-column: 1 / -1 ;}
.p-footer-row > div { margin: 15px auto 0 auto; }
.p-footer-linkList > li { display: inline; margin-bottom: 15px; }
.p-footer-row-4th { grid-column: 1 / -1 ; margin-top: 15px; }// contact us row
.p-footer-copyright {text-align: center;}
@media (min-width: @xf-responsiveWide) { 
	.p-footer-row { display:grid; grid-template-columns:1fr 720px 1fr; margin-top:10px; 
		.p-footer-row-1st { margin-left: 0; // cookies and style chooser
			.p-footer-linkList > li { float:none; display: block; }	// style chooser under cookies
		}
		.p-footer-row-2nd { grid-row: 2; grid-column: 2 ;}
		.p-footer-row-3rd { margin-right: 0; }// social media links
	}
}
// end of footer stuff