Difference between revisions of "Template:Tongji Software/CSS"

Line 4: Line 4:
 
     <title>Tongji Software | Pathlab</title>
 
     <title>Tongji Software | Pathlab</title>
 
     <style>
 
     <style>
−
         #sideMenu,#top_title {
+
         #sideMenu,
 +
        #top_title {
 
             display: none;
 
             display: none;
 
         }
 
         }
Line 11: Line 12:
 
             padding: 0px;
 
             padding: 0px;
 
             width: 90vw;
 
             width: 90vw;
−
             margin-top: -12px;
+
             margin-top: -13px;
−
             margin-left:10px;
+
             margin-left: 10px;
 
         }
 
         }
−
         #indexMenu ul{
+
       
−
             margin-left:-10px;
+
         #indexMenu ul {
 +
             margin-left: -10px;
 
         }
 
         }
 
         /*content style*/
 
         /*content style*/
Line 152: Line 154:
 
         /* -------------------------------- Primary style -------------------------------- */
 
         /* -------------------------------- Primary style -------------------------------- */
 
          
 
          
−
         *, *:after, *:before {
+
         *,
 +
        *:after,
 +
        *:before {
 
             -webkit-box-sizing: border-box;
 
             -webkit-box-sizing: border-box;
 
             -moz-box-sizing: border-box;
 
             -moz-box-sizing: border-box;
Line 179: Line 183:
 
             text-decoration: none;
 
             text-decoration: none;
 
         }
 
         }
−
         a:hover, a:focus {
+
       
 +
         a:hover,
 +
        a:focus {
 
             transform: translateY(0);
 
             transform: translateY(0);
 
         }
 
         }
 +
       
 
         a:visited {
 
         a:visited {
−
             color:white;
+
             color: white;
 
         }
 
         }
 
         /* -------------------------------- Modules - reusable parts of our design -------------------------------- */
 
         /* -------------------------------- Modules - reusable parts of our design -------------------------------- */
Line 201: Line 208:
 
         /* -------------------------------- Main components -------------------------------- */
 
         /* -------------------------------- Main components -------------------------------- */
 
          
 
          
−
         html, body {
+
         html,
 +
        body {
 
             height: 100%;
 
             height: 100%;
 
         }
 
         }
Line 247: Line 255:
 
                 top: -80px;
 
                 top: -80px;
 
                 background-color: rgba(2, 23, 37, 0.96);
 
                 background-color: rgba(2, 23, 37, 0.96);
−
                 /* -webkit-transition: -webkit-transform 0.3s;
+
                 -webkit-transition: -webkit-transform 0.3s;
 
                 -moz-transition: -moz-transform 0.3s;
 
                 -moz-transition: -moz-transform 0.3s;
−
                 transition: transform 0.3s; */
+
                 transition: transform 0.3s;
 
             }
 
             }
 
             .cd-header.is-visible {
 
             .cd-header.is-visible {
Line 330: Line 338:
 
             background-color: rgba(2, 23, 37, 0);
 
             background-color: rgba(2, 23, 37, 0);
 
         }
 
         }
−
         .cd-primary-nav-trigger:hover{
+
       
−
            position: fixed;
+
         .cd-primary-nav-trigger:hover {
−
            transform: translateY(0);
+
            position: fixed;
 +
            transform: translateY(0);
 
         }
 
         }
−
          #cd-primary-naver a:hover{
+
       
−
                background-color: white;
+
        #cd-primary-naver a:hover {
−
                color: black;
+
            background-color: white;
−
            }
+
            color: black;
 +
        }
 +
       
 
         .cd-primary-nav-trigger .cd-menu-text {
 
         .cd-primary-nav-trigger .cd-menu-text {
 
             position: absolute;
 
             position: absolute;
Line 359: Line 370:
 
             bottom: auto;
 
             bottom: auto;
 
             right: auto;
 
             right: auto;
−
             /*-webkit-transform: translateX(-50%) translateY(-50%);
+
             -webkit-transform: translateX(-50%) translateY(-50%);
 
             -moz-transform: translateX(-50%) translateY(-50%);
 
             -moz-transform: translateX(-50%) translateY(-50%);
 
             -ms-transform: translateX(-50%) translateY(-50%);
 
             -ms-transform: translateX(-50%) translateY(-50%);
 
             -o-transform: translateX(-50%) translateY(-50%);
 
             -o-transform: translateX(-50%) translateY(-50%);
−
             transform: translateX(-50%) translateY(-50%);*/
+
             transform: translateX(-50%) translateY(-50%);
 
             width: 28px;
 
             width: 28px;
 
             height: 2px;
 
             height: 2px;
Line 373: Line 384:
 
         }
 
         }
 
          
 
          
−
         .cd-primary-nav-trigger .cd-menu-icon::before, .cd-primary-nav-trigger .cd-menu-icon:after {
+
         .cd-primary-nav-trigger .cd-menu-icon::before,
 +
        .cd-primary-nav-trigger .cd-menu-icon:after {
 
             content: '';
 
             content: '';
 
             width: 100%;
 
             width: 100%;
Line 397: Line 409:
 
         }
 
         }
 
          
 
          
−
         .cd-primary-nav-trigger .cd-menu-icon.is-clicked::before, .cd-primary-nav-trigger .cd-menu-icon.is-clicked::after {
+
         .cd-primary-nav-trigger .cd-menu-icon.is-clicked::before,
 +
        .cd-primary-nav-trigger .cd-menu-icon.is-clicked::after {
 
             background-color: white;
 
             background-color: white;
 
         }
 
         }
Line 442: Line 455:
 
                 left: auto;
 
                 left: auto;
 
                 right: 1em;
 
                 right: 1em;
−
                 /*-webkit-transform: translateX(0) translateY(-50%);
+
                 -webkit-transform: translateX(0) translateY(-50%);
 
                 -moz-transform: translateX(0) translateY(-50%);
 
                 -moz-transform: translateX(0) translateY(-50%);
 
                 -ms-transform: translateX(0) translateY(-50%);
 
                 -ms-transform: translateX(0) translateY(-50%);
 
                 -o-transform: translateX(0) translateY(-50%);
 
                 -o-transform: translateX(0) translateY(-50%);
−
                 transform: translateX(0) translateY(-50%);*/
+
                 transform: translateX(0) translateY(-50%);
 
             }
 
             }
 
         }
 
         }
Line 455: Line 468:
 
             height: 100%;
 
             height: 100%;
 
             width: 100%;
 
             width: 100%;
−
             margin:10vh 0vw 0vh 0vw;
+
             margin: 10vh 0vw 0vh 0vw;
 
             font-family: "Cambria";
 
             font-family: "Cambria";
 
             /*菜单下来后的背景色*/
 
             /*菜单下来后的背景色*/
 
             /*background: rgba(2, 23, 37, 0.8);*/
 
             /*background: rgba(2, 23, 37, 0.8);*/
−
             /*background: rgba(0, 0, 0, 0.7);*/
+
             background: rgba(0, 0, 0, 0.7);
−
            --color-text: #fff;
+
−
            --color-bg: #1f174e;
+
−
            --color-bg-2: #151436;
+
−
            --color-bg-3: #000;
+
−
            --color-link: #8596df;
+
−
            --color-link-hover: #723bb7;
+
−
            background: radial-gradient(ellipse at 30% 48%, var(--color-bg) 0, var(--color-bg-2) 45%, var(--color-bg-3) 150%);
+
 
             z-index: 2;
 
             z-index: 2;
 
             text-align: center;
 
             text-align: center;
Line 475: Line 481:
 
             /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
 
             /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
 
             -webkit-overflow-scrolling: touch;
 
             -webkit-overflow-scrolling: touch;
−
             /*-webkit-transform: translateY(-100%);
+
             -webkit-transform: translateY(-100%);
 
             -moz-transform: translateY(-100%);
 
             -moz-transform: translateY(-100%);
 
             -ms-transform: translateY(-100%);
 
             -ms-transform: translateY(-100%);
 
             -o-transform: translateY(-100%);
 
             -o-transform: translateY(-100%);
−
             transform: translateY(-100%);*/
+
             transform: translateY(-100%);
 
             -webkit-transition-property: -webkit-transform;
 
             -webkit-transition-property: -webkit-transform;
 
             -moz-transition-property: -moz-transform;
 
             -moz-transition-property: -moz-transform;
Line 661: Line 667:
 
         <nav id="cd-primary-naver">
 
         <nav id="cd-primary-naver">
 
             <ul class="cd-primary-nav">
 
             <ul class="cd-primary-nav">
−
                 <li style="height:8vh"><li>
+
                 <li style="height:8vh">
−
                <li><a href="#0">HOME</a></li>
+
                    <li>
−
                <li class="cd-label">About Us</li>
+
                        <li><a href="#0">HOME</a></li>
 +
                        <li class="cd-label">About Us</li>
  
−
                <li><a href="#0">Our Projects</a></li>
+
                        <li><a href="#0">Our Projects</a></li>
−
                <li><a href="#0">Team Information</a></li>
+
                        <li><a href="#0">Team Information</a></li>
  
−
                <li class="cd-label">Other</li>
+
                        <li class="cd-label">Other</li>
−
                <li><a href="#0">Safety</a></li>
+
                        <li><a href="#0">Safety</a></li>
−
                <li><a href="#0">Human Practices</a></li>
+
                        <li><a href="#0">Human Practices</a></li>
−
                <li><a href="#0">Education & Engagement</a></li>
+
                        <li><a href="#0">Education & Engagement</a></li>
−
                <li><a href="#0">Model</a></li>
+
                        <li><a href="#0">Model</a></li>
−
                <li><a href="#0">Medal</a></li>
+
                        <li><a href="#0">Medal</a></li>
−
                <li><a href="#0">Judging Form</a></li>
+
                        <li><a href="#0">Judging Form</a></li>
  
−
                <li class="cd-label">Follow us</li>
+
                        <li class="cd-label">Follow us</li>
  
−
                <li class="cd-social cd-facebook"><a href="#0">Facebook</a></li>
+
                        <li class="cd-social cd-facebook"><a href="#0">Facebook</a></li>
−
                <li class="cd-social cd-instagram"><a href="#0">Instagram</a></li>
+
                        <li class="cd-social cd-instagram"><a href="#0">Instagram</a></li>
−
                <li class="cd-social cd-dribbble"><a href="#0">Dribbble</a></li>
+
                        <li class="cd-social cd-dribbble"><a href="#0">Dribbble</a></li>
−
                <li class="cd-social cd-twitter"><a href="#0">Twitter</a></li>
+
                        <li class="cd-social cd-twitter"><a href="#0">Twitter</a></li>
 
             </ul>
 
             </ul>
 
         </nav>
 
         </nav>

Revision as of 15:50, 8 October 2019

Tongji Software | Pathlab