Difference between revisions of "Template:XJTU-China/style"

Line 105: Line 105:
 
     width: 130px;
 
     width: 130px;
 
     height: 130px;
 
     height: 130px;
−
     background-color: snow;
+
     background-color: #4b5165;
 
     /* opacity: 0.9; */
 
     /* opacity: 0.9; */
−
     box-shadow: 0px 4px 5px 0px slategray!important;
+
     box-shadow: 0px 4px 5px 0px #454959!important;
 
}
 
}
  
Line 141: Line 141:
 
.header_area.sticky {
 
.header_area.sticky {
 
     padding: 0.8em 1em;
 
     padding: 0.8em 1em;
−
     background-color: snow;
+
     background-color: #4b5165;
−
    /* opacity: 0.9; */
+
     box-shadow: 0px 2px 5px #454959!important;
−
     box-shadow: 2px 2px 5px slategray!important;
+
 
}
 
}
  
Line 356: Line 355:
 
.pageHeadline {
 
.pageHeadline {
 
     position: relative;
 
     position: relative;
−
     top: 10%;
+
    display: flex;
−
     padding: 10px 20%;
+
    justify-content: center;
 +
    align-items: center;
 +
    width: 100vw;
 +
    height: 70vh;
 +
   
 +
}
 +
 
 +
.pageHeadline span{
 +
    position: relative;
 +
     top: 6%;
 +
     height: 72px;
 +
    width: 62%;
 
     text-align: center;
 
     text-align: center;
 
     font-family: 'britanic';
 
     font-family: 'britanic';
−
     font-size: 62px;
+
     font-size: 72px;
 
     letter-spacing: 10px;
 
     letter-spacing: 10px;
 
     text-transform: uppercase;
 
     text-transform: uppercase;
 
     color: snow;
 
     color: snow;
 
     border-bottom: 5px solid snow;
 
     border-bottom: 5px solid snow;
−
}
 
−
 
−
.teamIntro {
 
−
    width: 80%;
 
 
}
 
}
  
Line 381: Line 387:
 
     font-family: 'britanic',sans-serif;
 
     font-family: 'britanic',sans-serif;
 
     font-weight: 500;
 
     font-weight: 500;
−
}
 
−
 
−
.teamIntro-part {
 
−
    margin: 3em 0;
 
 
}
 
}
  
Line 392: Line 394:
 
     margin: 0;
 
     margin: 0;
 
     text-align: justify;
 
     text-align: justify;
 +
    color: #21242d;;
 
}
 
}
  
Line 401: Line 404:
 
.page{
 
.page{
 
     border-radius: 0.3em;
 
     border-radius: 0.3em;
−
     box-shadow: 2px 2px 20px slategray;
+
     box-shadow: 2px 2px 20px;
−
     background-color: snow !important;
+
     background-color: #2e323e !important;
 
     z-index: 2;
 
     z-index: 2;
 
}
 
}
Line 457: Line 460:
 
     font-size: 18px !important;
 
     font-size: 18px !important;
 
     line-height: 1.5em;
 
     line-height: 1.5em;
−
     color: #222222;
+
     color: snow;
 
}
 
}
  
−
.xjtuText p.green b{  
+
.xjtuText p b{  
−
     color: var(--iGEMgreen) !important;
+
     color: #7298ff !important;
−
}
+
−
.xjtuText p.brown b{
+
−
    color: var(--fdtbrown)!important;
+
 
}
 
}
 +
  
 
.xjtuText .imgWrapper {
 
.xjtuText .imgWrapper {
Line 492: Line 493:
 
}
 
}
  
−
.pinkBox {
+
.xjtuText .hoverHighlight::before {
−
     background-color: hotpink;
+
    transform: scaleX(0);
 +
    transform-origin: bottom right;
 +
}
 +
 
 +
.xjtuText .hoverHighlight:hover::before{
 +
    transform: scaleX(1);
 +
    transform-origin: bottom left;
 +
}
 +
 
 +
.xjtuText .hoverHighlight::before {
 +
    content: " ";
 +
    display: block;
 +
    position: absolute;
 +
    top: 0; right: 0; bottom: 0; left: 0;
 +
    inset: 0 0 0 0;
 +
    background: hsl(200 100% 80%);
 +
    z-index: -1;
 +
    transition: transform .3s ease;
 +
}
 +
 
 +
.highlightBox {
 +
     background-color: #3a3f4f;
 +
    padding: 10%;
 +
    border-radius: 15px;
 
}
 
}
  
Line 626: Line 650:
 
.app-icon a .fa-twitter-square:hover {
 
.app-icon a .fa-twitter-square:hover {
 
     color: #45cbf4
 
     color: #45cbf4
−
}
 
−
.app-icon a .fa-youtube-square:hover {
 
−
    color:#ff0000
 
 
}
 
}
 
.app-icon a .fa-instagram:hover {
 
.app-icon a .fa-instagram:hover {
Line 635: Line 656:
 
.app-icon a .fa-weixin:hover {
 
.app-icon a .fa-weixin:hover {
 
     color: #04BE02;
 
     color: #04BE02;
−
}
 
−
.app-icon a .fa-weibo:hover {
 
−
    color: #d6ae28;
 
−
}
 
−
.app-icon a .fa-envelope:hover {
 
−
    color: #e09508;
 
 
}
 
}
  
Line 668: Line 683:
 
.tooltip__base {
 
.tooltip__base {
 
position: absolute;
 
position: absolute;
−
bottom: 2em;
+
bottom: 1em;
−
left: 50%;
+
left: 15%;
 
margin-left: -150px;
 
margin-left: -150px;
−
width: 300px;
+
width: 480px;
−
height: 200px;
+
height: 360px;
 
display: flex;
 
display: flex;
 
     align-items: center;
 
     align-items: center;
Line 686: Line 701:
 
align-items: center;
 
align-items: center;
 
justify-content: center;
 
justify-content: center;
−
width: 65%;
+
width: 80%;
 
padding: 0 1em;
 
padding: 0 1em;
 
opacity: 0;
 
opacity: 0;
−
font-size: 0.85em;
+
font-size: 0.6em;
 +
    line-height: 1.2em;
 
}
 
}
  
Line 702: Line 718:
  
 
.tooltip__shape {
 
.tooltip__shape {
−
fill: #141514;
+
fill: #eee;
 
}
 
}
  
Line 1,134: Line 1,150:
 
.dialogButton{
 
.dialogButton{
 
width: 200px;
 
width: 200px;
−
border: solid 2px;
+
border: solid 2px #2347a3;
−
border-color:  rgb(176, 40, 218);
+
background-color: #2347a3;
−
background-color: snow;
+
 
padding: .5em;
 
padding: .5em;
 
font-family: 'montserrat';
 
font-family: 'montserrat';

Revision as of 13:25, 4 September 2021