Feat: DJI & Bili API

大疆和哔哩哔哩的 iframe API
2022-04-17 00:49:45 +08:00
parent 99c196afad
commit 8cdf2a6655
5 changed files with 267 additions and 3 deletions
@@ -0,0 +1,121 @@
+/* 哔哩小窗样式 */
+*{
+  margin: 0;
+  box-sizing: border-box;
+}
+
+body{
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+img{
+  max-width: 100%;
+  vertical-align: middle;
+}
+
+a{
+  color: inherit;
+  transition: color .3s;
+  text-decoration: none;
+}
+
+.bili-box{
+  color: #555;
+  height: 10em;
+  display: flex;
+  position: relative;
+}
+
+.bili-box.white{ background: #fff }
+.bili-box.gray{ background: #f9f9f9 }
+.bili-box.black{
+  color: #eee;
+  background: #333;
+}
+.bili-box h1{
+  overflow: hidden;
+  font-size: 1.05em;
+  font-weight: normal;
+  white-space: nowrap;
+  margin-bottom: .5em;
+  text-overflow: ellipsis;
+}
+.bili-box h1 a:hover{
+  color: #4cb1f3;
+}
+
+.bili-box .bili-img{
+  flex: 0 0 30%;
+  max-width: 30%;
+}
+.bili-box .bili-img img{
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.bili-box .bili-info{
+  padding: 1em;
+  max-width: 70%;
+}
+.bili-info p{
+  opacity: .75;
+  font-size: .85em;
+
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+
+  overflow: hidden;
+  text-overflow: clip;
+}
+.bili-powered{
+  right: 0;
+  bottom: 0;
+  color: #fff;
+  opacity: .8;
+  padding: .5em;
+  line-height: 1;
+  font-size: .5em;
+  position: absolute;
+  background: #4cb1f3;
+  transition: opacity .3s;
+  border-radius: 1em 0 0 0;
+}
+.bili-powered:hover{ opacity: 1 }
+.black .bili-powered{ background: #0d5e92 }
+
+.bili-hidden{ display: none }
+
+@media screen and (max-width: 768px){
+  .bili-box .bili-info{
+    left: 0;
+    right: 0;
+    bottom: 0;
+    position: absolute;
+
+    color: #fff;
+    max-width: none;
+    font-size: .875em;
+    padding: 1em .75em;
+    background: rgba(0, 0, 0, .5);
+    -webkit-backdrop-filter: blur(3px);
+    backdrop-filter: blur(3px);
+  }
+
+  .bili-info p{
+    -webkit-line-clamp: 1;
+  }
+  
+  .bili-box .bili-img{
+    flex: 1;
+    max-width: none;
+  }
+
+  .bili-powered{
+    top: 0;
+    bottom: inherit;
+    border-radius: 0 0 0 1em;
+  }
+}