0719 更新

style/base.css

@@ -172,6 +172,7 @@ div.image-tip img {
 
 div.image-tip {
   pointer-events: none;
+
   & p {
     pointer-events: auto;
     height: 0;
@@ -182,7 +183,8 @@ div.image-tip {
     justify-self: center;
     transition: all 0.2s;
   }
-  & img{
+
+  & img {
     pointer-events: auto;
   }
 }
@@ -410,12 +412,12 @@ main.hidden {
 }
 
 .sidebar-nav>ul>li>ul>li>a:has(>img):hover {
-  transition: transform .4s cubic-bezier(.16,-0.17,.65,-0.5);
+  transition: transform .4s cubic-bezier(.16, -0.17, .65, -0.5);
   transform: translateX(-103px);
 }
 
 .sidebar-nav>ul>li>a:has(>img):hover {
-  transition: transform .4s cubic-bezier(.16,-0.17,.65,-0.5);
+  transition: transform .4s cubic-bezier(.16, -0.17, .65, -0.5);
   transform: translateX(-83px);
 }
 
@@ -538,10 +540,25 @@ body.sticky .sidebar-toggle {
 
 .markdown-section:has(iframe[single]) {
   height: 100%;
+
+  &>p {
+    display: block;
+    position: absolute;
+    padding: 10px;
+    border-radius: 0 10px 0 10px;
+    opacity: 50%;
+    top: 0;
+    transition: background-color 0.3s, opacity 0.3s;
+
+    &:hover {
+      opacity: 100%;
+      transition: opacity 0.3s;
+    }
+  }
 }
 
 .markdown-section iframe {
-  border: 1px solid #eee;
+  border: 1px solid #000;
   width: 100%;
   height: 100%;
   min-width: 100%
@@ -918,7 +935,8 @@ section.cover blockquote>p>a {
   border-bottom-right-radius: 10px;
   filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.5));
   transition: transform 0.3s, background-color 0.3s, color 0.3s;
-  &:hover{
+
+  &:hover {
     transform: translate(0, -5px) rotate(.3deg);
     transition: transform 0.3s, background-color 0.3s, color 0.3s;
   }
@@ -929,10 +947,6 @@ section.cover blockquote>p>a {
   margin-left: 0;
 }
 
-.markdown-section iframe {
-  margin: 1em 0
-}
-
 .markdown-section em {
   color: #7f8c8d
 }
@@ -1130,6 +1144,7 @@ div.bv {
   height: 0;
   padding-bottom: 56.25%;
   margin-bottom: 30px;
+
   &>iframe {
     position: absolute;
     background-color: transparent;
@@ -1137,6 +1152,7 @@ div.bv {
     left: 0;
     width: 100%;
     height: 100%;
+    margin: 1em 0;
     filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.5));
   }
 }
@@ -1224,30 +1240,33 @@ article.markdown-section:has(.intro)>.notice {
 article.markdown-section:has(.intro)>.notice[onclick] {
   cursor: pointer;
   transition: all 0.5s;
+
   &:hover {
     transition: all 0.5s;
   }
 }
 
-div.medium-zoom-overlay{
+div.medium-zoom-overlay {
   opacity: 0.5 !important;
 }
 
-del{
+del {
   text-decoration: none;
   background-color: #5C5D67;
   color: #5C5D67;
   transition: background-color 0.1s, color 0.1s;
   border-radius: 4px;
   cursor: pointer;
+
   &:hover {
     background-color: #7B7C84;
     color: #7B7C84;
     transition: background-color 0.1s, color 0.1s;
   }
+
   &:active {
     background-color: inherit;
     color: inherit;
-    transition: background-color 0.1s, color 0.1s;    
+    transition: background-color 0.1s, color 0.1s;
   }
 }

style/color.css

@@ -224,4 +224,10 @@ article.markdown-section:has(.intro)>.notice {
 
 div.medium-zoom-overlay{
   background-color: var(--background-color) !important;
+}
+
+.markdown-section:has(iframe[single]) {
+  &>p{
+    background-color: var(--background-color);
+  }
 }