モバイルボタン・アドミンバーの高さやブラウザの違いを考慮したCSS調整

xserver-inc · Jun 26, 2023 · 831d8c9 · 831d8c9
1 parent dac8aaa
commit 831d8c9
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 9 deletions.
diff --git a/amp.css b/amp.css
@@ -9337,8 +9337,14 @@ pre {
     display: block;
   }
 
-  html:has(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) {
-    margin-top: 53px !important;
+  /* モバイルヘッダー高さ分、余白を設ける */
+  body:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) {
+    margin-top: 53px;
+  }
+
+  /* adminバーがある場合、その余白分を除いた余白とする */
+  .admin-bar:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) {
+    margin-top: calc(53px - var(--wp-admin--admin-bar--height));
   }
 }
 @media screen and (max-width: 834px) {

diff --git a/css/admin.css b/css/admin.css
@@ -17063,6 +17063,10 @@ body.wp-admin {
   border-style: solid;
 }
 @media screen and (max-width: 1023px) {
+  .admin-settings .demo {
+    /* モバイルヘッダー高さ分、余白を設ける */
+    /* adminバーがある場合、その余白分を除いた余白とする */
+  }
   .admin-settings .demo .navi-footer {
     float: none;
     margin: 0;
@@ -17192,8 +17196,11 @@ body.wp-admin {
   .admin-settings .demo .slicknav_menu {
     display: block;
   }
-  .admin-settings .demo html:has(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) {
-    margin-top: 53px !important;
+  .admin-settings .demo body:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) {
+    margin-top: 53px;
+  }
+  .admin-settings .demo .admin-bar:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) {
+    margin-top: calc(53px - var(--wp-admin--admin-bar--height));
   }
 }
 @media screen and (max-width: 834px) {

diff --git a/scss/breakpoints/_max-width-1023.scss b/scss/breakpoints/_max-width-1023.scss
@@ -186,7 +186,12 @@ div.sidebar {
   display: block;
 }
 
-// アドミンバーが表示されている場合は上に余白を取る
-html:has(.mblt-header-mobile-buttons ,.mblt-header-and-footer-mobile-buttons) {
-  margin-top: 53px!important;
+/* モバイルヘッダー高さ分、余白を設ける */
+body:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) {
+  margin-top: 53px;
+}
+
+/* adminバーがある場合、その余白分を除いた余白とする */
+.admin-bar:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) {
+  margin-top: calc(53px - var(--wp-admin--admin-bar--height));
 }
diff --git a/style.css b/style.css
@@ -10467,8 +10467,14 @@ _:-ms-lang(x), .mc-circle {
     display: block;
   }
 
-  html:has(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) {
-    margin-top: 53px !important;
+  /* モバイルヘッダー高さ分、余白を設ける */
+  body:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) {
+    margin-top: 53px;
+  }
+
+  /* adminバーがある場合、その余白分を除いた余白とする */
+  .admin-bar:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) {
+    margin-top: calc(53px - var(--wp-admin--admin-bar--height));
   }
 }
 @media screen and (max-width: 834px) {