First Commit

web/html/theme/FT_WEB20/css/responsive.css

@@ -0,0 +1,117 @@
+  #theme_popup {
+        position:fixed;
+        left:0;
+        bottom:0;
+        z-index:999999;
+        width:100%;
+        background-color:rgba(0,0,0,0.5);
+    }
+    #theme_popup.on {
+        display:none;
+    }
+    #theme_popup ul {
+        display:flex;
+        flex-direction:row;
+        justify-content:center;
+        align-items:center;
+        padding:20px 0;
+    }
+    #theme_popup ul li {
+        width:120px;
+        height:20px;
+        line-height:20px;
+        text-align:center;
+        position:relative;
+    }
+    #theme_popup ul li svg {
+        position:relative;
+        top:50%;
+        transform:translateY(-50%);
+    }
+    #theme_popup ul li.active {
+
+    }
+    #theme_popup ul li i {
+        margin-right:4px;
+    }
+    #theme_popup ul li a {
+        font-size:14px;
+        color:#fff;
+    }
+    #theme_popup .pop_close {
+        position:absolute;
+        top:50%; transform:translateY(-50%);
+        left:55px;
+    }
+    #theme_popup .pop_close i {
+        font-size:1.3em;
+        color:#fff;
+        cursor: pointer;
+    }
+
+    #theme_link {
+        position:fixed;
+        left:40px;
+        bottom:70px;
+        z-index:9999;
+    }
+    #theme_link.active {
+        bottom:20px;
+    }
+    #theme_link a {
+        display:block;
+        width:50px;
+        height:50px;
+        border-radius:50%;
+        background-color:#000;
+        text-align:center;
+        overflow: hidden;
+        position:relative;
+    }
+    #theme_link a:nth-child(2) {
+        margin-top:5px;
+    }
+    #theme_link a.on{
+        width:170px;
+        height:50px;
+        border-radius:50px;
+        background-color:#e34039;
+        transition:all 0.3s;
+    }
+    #theme_link a.on span {
+        opacity:1;
+        transition-delay:0.3s;
+    }
+    #theme_link a span {
+        opacity:0;
+        line-height:50px;
+        font-size:16px;
+        font-weight:500;
+        color:#fff;
+    }
+    #theme_link a.on img{
+        display:none;
+    }
+    #theme_link a img{
+        position:absolute;
+        top:50%;left:50%;transform:translate(-50%,-50%);
+        color:#fff;
+    }
+    #theme_link i {
+        font-size:1em;
+        margin-left:5px;
+    }
+    .popup_open {
+        display:none !important;
+    }
+    .popup_open.active {
+        display:block !important;
+    }
+    @media screen and (max-width:1200px) {
+        #theme_link {
+            opacity:0;
+        }
+        #theme_popup {
+            opacity:0;
+        }
+    }