Fix multi-comments & Gemini style

This commit is contained in:
Mimi 2023-01-01 17:26:36 +08:00
parent 418072b010
commit e9cb704283
3 changed files with 36 additions and 19 deletions

View File

@ -249,3 +249,23 @@ button($color) {
color: white;
}
}
gemini-block() {
background: var(--content-bg-color);
border-radius: $border-radius-inner;
box-shadow: $box-shadow-inner;
}
gemini-block-not-first() {
border-radius: $border-radius;
box-shadow: $box-shadow;
margin-top: $sidebar-offset;
+tablet() {
margin-top: $content-tablet-padding;
}
+mobile() {
margin-top: $content-mobile-padding;
}
}

View File

@ -24,26 +24,20 @@
// Desktop layout styles.
// ==================================================
// Post blocks.
.main-inner > {
.main-inner {
.sub-menu, .post-block, .tabs-comment, .comments, .pagination {
background: var(--content-bg-color);
border-radius: $border-radius-inner;
box-shadow: $box-shadow-inner;
gemini-block();
}
&:not(:first-child):not(.sub-menu) {
border-radius: $border-radius;
box-shadow: $box-shadow;
margin-top: $sidebar-offset;
+tablet() {
margin-top: $content-tablet-padding;
}
+mobile() {
margin-top: $content-mobile-padding;
}
.post-block:not(:first-child) {
&:not(:first-child) {
gemini-block-not-first();
}
}
.tabs-comment, .comments, .pagination {
gemini-block-not-first();
}
}
// Post & Comments blocks.

View File

@ -175,9 +175,12 @@ NexT.utils = {
const tabContent = nav.nextElementSibling;
tabContent.style.overflow = 'hidden';
tabContent.style.transition = 'height 1s';
const prevHeight = parseInt(window.getComputedStyle(tabContent.querySelector('.active')).height.replace('px', ''), 10);
const paddingTop = parseInt(window.getComputedStyle(tabContent.querySelector('.active')).paddingTop.replace('px', ''), 10);
const marginBottom = parseInt(window.getComputedStyle(tabContent.querySelector('.active').firstChild).marginBottom.replace('px', ''), 10);
// Comment system selection tab does not contain .active class.
const activeTab = tabContent.querySelector('.active') || tabContent.firstChild;
// Hight might be `auto`.
const prevHeight = parseInt(window.getComputedStyle(activeTab).height.replace('px', ''), 10) || 0;
const paddingTop = parseInt(window.getComputedStyle(activeTab).paddingTop.replace('px', ''), 10);
const marginBottom = parseInt(window.getComputedStyle(activeTab.firstChild).marginBottom.replace('px', ''), 10);
tabContent.style.height = prevHeight + paddingTop + marginBottom + 'px';
// Add & Remove active class on `nav-tabs` & `tab-content`.
[...nav.children].forEach(target => {