Merge pull request AgoraIO#232 from AgoraIO/dev/github

fix icon
toshish · Sep 8, 2020 · 2527f43 · 2527f43
2 parents 34755e5 + 274792d
commit 2527f43
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 36 deletions.
diff --git a/One-to-One-Video/Agora-Web-Tutorial-1to1-Webpack/index.html b/One-to-One-Video/Agora-Web-Tutorial-1to1-Webpack/index.html
@@ -12,12 +12,18 @@
     <nav class="agora-navbar">
       <div class="nav-wrapper agora-primary-bg valign-wrapper">
         <h5 class="left-align">Basic Communication</h5>
-        <a href="https://github.com/AgoraIO/Basic-Video-Call/tree/master/One-to-One-Video/Agora-Web-Tutorial-1to1-Webpack" class="aperture">
-          <span class="github"></span>
-        </a>
       </div>
     </nav>
   </div>
+  <div class="github-box">
+    <a href="https://github.com/AgoraIO/Basic-Video-Call/tree/master/One-to-One-Video/Agora-Web-Tutorial-1to1-Webpack">
+      <span class="github"></span>
+      <div class="github-text">
+        <span class="github-text1">GITHUB</span><br>
+        <span class="github-text2">点击查看源码</span> 
+      </div>
+    </a>
+  </div>
   <form id="form" class="row col l12 s12">
     <div class="row container col l12 s12">
       <div class="col" style="min-width: 433px; max-width: 443px">

diff --git a/One-to-One-Video/Agora-Web-Tutorial-1to1-Webpack/src/assets/style.css b/One-to-One-Video/Agora-Web-Tutorial-1to1-Webpack/src/assets/style.css
@@ -141,43 +141,54 @@ html, body {
   -webkit-transform: rotate(360deg);
   transform: rotate(360deg)
   }
-  }
-  .github {
+}
+
+.github-box {
+  position: absolute;
+  width: 155px;
+  height: 45px;
+  border-radius: 28px;
+  background: #186bcc;
+  right: 330px;
+  padding: 10px;
+  opacity: 0.65;
+  top: 75px;
+  right: 60px;
+  background-color: #e5e5e5;
+}
+
+.github-text {
+  top: 20%;
+  left: 45%;
+  transform: translate(45%, -20%);
+}
+
+.github-text1 {
+  /* position: absolute; */
+  font-size: 14px;
+  color: black;
+}
+
+.github-text2 {
+  position: absolute;
+  font-size: 10px;
+  font-weight: bold;
+  margin-top: -5px;
+  margin-left: -10px;
+  color: black;
+}
+
+.github { 
   cursor: pointer;
   background-repeat: no-repeat;
   position: absolute;
   background-image: url("../assets/github.png");
-  background-size: 50px;
+  background-size: 36px;
   display: block;
-  width: 50px;
-  height: 50px;
-  margin: 20px;
+  width: 36px;
+  height: 36px;
+  top: 45px;
   border-radius: 28px;
   transform: translateY(-40px);
-  -webkit-box-reflect: below;
-  -webkit-box-reflect:below 2px
-  -webkit-linear-gradient(90deg, rgba(0,0,0,0) 15%,rgba(0,0,0,0.5));
-  }
-
-  .aperture {
-  /* display: inline-block; */
-  width: 58px !important;
-  height: 58px !important;
-  position: absolute;
-  right: 60px;
-  top: 28px;
-  z-index: 1999;
-  }
-
-  .aperture::after {
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: -24px;
-  left: 16px;
-  border-radius: 50%;
-  box-shadow: inset 0 0 10px #fff06a, inset 4px 0 16px #f0f, inset -4px 0 16px #0ff, inset 4px 0 16px #f0f, inset -4px 0 16px #0ff, 0 0 10px #fff06a, -6px 0 36px #f0f, 6px 0 36px #0ff;
-  -webkit-animation: rotate 3s infinite linear;
-  animation: rotate 3s infinite linear;
-  }
+}
+