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

 
(32 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<style>
 
<style>
−
 
 
/* --------------- */
 
/* --------------- */
 
/* common settings */
 
/* common settings */
Line 57: Line 56:
 
     --iGEMgreen: #2a9661;
 
     --iGEMgreen: #2a9661;
 
     --fdtbrown:#f58f5f;
 
     --fdtbrown:#f58f5f;
−
     --lightpink:#fdc4b6;
+
     --d: 700ms;
−
     --nectarinered:#ea7070;
+
     --e: cubic-bezier(0.19, 1, 0.22, 1);
 
}
 
}
  
Line 105: Line 104:
 
     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 140:
 
.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 172: Line 170:
 
     font-size: 16px;
 
     font-size: 16px;
 
     text-transform: uppercase;
 
     text-transform: uppercase;
−
     color: #222;
+
     color: snow;
 
     padding: 0px;
 
     padding: 0px;
 
     display: inline-block;
 
     display: inline-block;
Line 329: Line 327:
  
 
.fixedBackground:before {
 
.fixedBackground:before {
−
     background: rgba(0, 0, 0, 0.1);
+
     background: rgba(0, 0, 0, 0.15);
 
     position: absolute;
 
     position: absolute;
 
     width: 100%;
 
     width: 100%;
Line 340: Line 338:
 
.fixedBackground {
 
.fixedBackground {
 
     height: 70vh;
 
     height: 70vh;
 +
    background-color: white;
 
}
 
}
  
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;
 +
    z-index: 2;
 +
}
 +
 
 +
.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 hgroup h2{
 
−
    color: #222222 !important;
 
−
    font-family: 'montserrat',sans-serif;
 
−
    font-weight: 600;
 
−
}
 
−
 
−
.teamIntro hgroup h4{
 
−
    color: #222222 !important;
 
−
    font-family: 'roboto',sans-serif;
 
−
    font-weight: 500;
 
−
}
 
−
 
−
.teamIntro-part {
 
−
    margin: 3em 0;
 
 
}
 
}
  
Line 388: Line 382:
 
     margin: 0;
 
     margin: 0;
 
     text-align: justify;
 
     text-align: justify;
 +
    background-color: #21242d;
 +
}
 +
 +
.container.mainBox.bg-white {
 +
    background-color: white !important;
 
}
 
}
  
 
.wallpaper-bg{
 
.wallpaper-bg{
 
     background-image: url(https://static.igem.org/mediawiki/2021/1/17/T--XJTU-China--wallpaper.jpg);
 
     background-image: url(https://static.igem.org/mediawiki/2021/1/17/T--XJTU-China--wallpaper.jpg);
−
     background-size: 30%;
+
     background-size: 90%;
 
}
 
}
  
 
.page{
 
.page{
−
     border-radius: 0.3em;
+
     border-radius: 20px;
−
     box-shadow: 2px 2px 20px slategray;
+
    padding: 1em 0;
−
     background-color: snow !important;
+
     background-color: #2e323e !important;
 +
    z-index: 202;
 +
}
 +
.page-light{
 +
    border-radius: 20px;
 +
    padding: 1em 0;
 +
     background-color: rgba(250,250,250,0.9) !important;
 
     z-index: 2;
 
     z-index: 2;
 
}
 
}
Line 408: Line 413:
 
     padding: 0;
 
     padding: 0;
 
     border: none;
 
     border: none;
−
     border-top: medium double #333;
+
     border-top: medium double white;
−
     color: #333;
+
     color: white;
 
     text-align: center;
 
     text-align: center;
 
}
 
}
Line 420: Line 425:
 
     font-size: 1.5em;
 
     font-size: 1.5em;
 
     padding: 0 0.25em;
 
     padding: 0 0.25em;
−
     background: white;
+
     background: #2e323e;
 +
    color: white;
 
}
 
}
  
−
.xjtuText{
+
.centerize {
−
     margin: 0 0 1em 0;
+
     display: flex !important;
−
     text-align: center;
+
    justify-content: center !important;
 +
    align-items: center !important;
 +
     text-align: center !important;
 
}
 
}
  
−
.xjtuText h1,.xjtuText h2,.xjtuText h3{
+
.xjtuText h1,.xjtuText h2,.xjtuText h3, .xjtuText h4{
 
     font-family: 'britanic',sans-serif !important;
 
     font-family: 'britanic',sans-serif !important;
 
}
 
}
  
 
.xjtuText h1{
 
.xjtuText h1{
−
     color: var(--iGEMgreen);
+
     color: #7298ff;
 
     text-transform: uppercase;
 
     text-transform: uppercase;
 
     font-weight: 600;
 
     font-weight: 600;
 
     letter-spacing: 3px;
 
     letter-spacing: 3px;
 +
    text-align: center;
 
}
 
}
  
Line 445: Line 454:
 
}
 
}
 
.xjtuText h3{
 
.xjtuText h3{
−
     text-transform: capitalize;
+
     color: #acde92;
 
     font-weight: 400;
 
     font-weight: 400;
 +
}
 +
.xjtuText h4,
 +
.xjtuText h5{
 +
    color: white;
 
}
 
}
  
Line 454: Line 467:
 
     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 p a {
 +
     color: #7298ff;
 +
    text-decoration-line: underline;
 +
    text-transform: capitalize;
 +
}
 +
 
 +
.xjtuText p.nav{
 +
    font-size: 1.2em!important;
 +
    font-weight: bold;
 +
}
 +
 
 +
.xjtuText h3 a {
 +
    color: inherit;
 +
    text-decoration: inherit;
 +
}
 +
 
 +
.xjtuText a.nav{
 +
    text-decoration: none;
 +
    font-size: 1.2em;
 
}
 
}
  
 
.xjtuText .imgWrapper {
 
.xjtuText .imgWrapper {
 +
    display: flex;
 +
    flex-direction: column;
 +
    justify-content: center;
 +
    align-items: center;
 +
    font-size: inherit;
 +
}
 +
 +
.xjtuText .imgWrapper img{
 
     display: block;
 
     display: block;
−
    margin: auto;
 
 
}
 
}
  
−
.xjtuText .imgWrapper imgDescrption{
+
.xjtuText .imgWrapper .description{
−
     margin-top: 5px;
+
     margin-top: 1%;
−
     font-family: 'roboto';
+
    color: grey;
 +
     font-family: 'eras';
 
     font-size: 80%;
 
     font-size: 80%;
 
     font-weight: 400;
 
     font-weight: 400;
Line 477: Line 516:
 
}
 
}
  
−
@media (max-width:768px) {
+
.xjtuText .imgWrapper .description .tag{
−
     .page{
+
     color: black;
−
        padding: 20px 30px;
+
−
    }
+
 
}
 
}
  
 +
.xjtuText .hoverHighlight::before {
 +
    transform: scaleX(0);
 +
    transform-origin: bottom right;
 +
}
  
−
.box {
+
.xjtuText .hoverHighlight:hover::before{
−
     width: 100%;
+
     transform: scaleX(1);
−
     background: #ccc;
+
     transform-origin: bottom left;
 
}
 
}
  
−
.progress {
+
.xjtuText .hoverHighlight::before {
−
     position: fixed;
+
     content: " ";
−
     top: 16px;
+
     display: block;
−
     left: 0;
+
     position: absolute;
−
     height: 5px;
+
    top: 0; right: 0; bottom: 0; left: 0;
−
     background: var(--fdtbrown);
+
     inset: 0 0 0 0;
−
     z-index: 20;
+
     background: hsl(200 100% 80%);
 +
     z-index: -1;
 +
    transition: transform .3s ease;
 
}
 
}
  
−
.align-padding-50-80 {
+
.xjtuText .underline {
−
     padding: 50px 80px;
+
     text-decoration: underline !important;
 
}
 
}
  
−
.align-padding-50-120 {
+
.xjtuText .sup {
−
     padding: 50px 120px;
+
    vertical-align: super;
 +
    font-size: 0.8em;
 +
}
 +
 
 +
.xjtuText .sub {
 +
    vertical-align: sub;
 +
    font-size: 0.8em;
 +
}
 +
 
 +
.xjtuText ul {
 +
    font-family: 'eras', sans-serif !important;
 +
    color: white;
 +
    font-size: 18px;
 +
}
 +
 
 +
img.hoverLarger {
 +
    cursor: zoom-in;
 +
    transition: 1s;
 +
}
 +
 
 +
img.hoverLarger:hover{
 +
    transition: 1s;
 +
    transform: scale(1.3);
 +
}
 +
 
 +
.highlightBox {
 +
    width: 95%;
 +
    background-color: #3a3f4f;
 +
    padding: 1em;
 +
    border-radius: 15px;
 +
}
 +
 
 +
.highlightBox-light {
 +
    width: 95%;
 +
    background-color: rgba(250,250,250,0.8);
 +
     padding: 1em;
 +
    border-radius: 15px;
 +
}
 +
 
 +
.card.card-dark {
 +
    background-color: #3a3f4f;
 +
}
 +
 
 +
@media (max-width:768px) {
 +
    .page,.page-light{
 +
        padding: 20px 30px;
 +
    }
 
}
 
}
  
Line 517: Line 606:
  
 
.linkBox-items {
 
.linkBox-items {
−
     box-shadow: 2px 2px 5px slategray;
+
     box-shadow: 2px 2px 5px #454959;
 +
    background-color: #3a3f4f;
 
     text-align: center;
 
     text-align: center;
 
     border-radius: 5px;
 
     border-radius: 5px;
Line 523: Line 613:
  
 
.linkBox-items:hover {
 
.linkBox-items:hover {
−
     border-color: #222;
+
     border-color: #7298ff;
 
}
 
}
  
 
.linkBox span {
 
.linkBox span {
 
     font-size: 4em;
 
     font-size: 4em;
−
     color: #222;
+
     color: #5472c3;
 
}
 
}
  
Line 536: Line 626:
 
     font-family: 'eras', sans-serif !important;
 
     font-family: 'eras', sans-serif !important;
 
     font-size: 1.2em;
 
     font-size: 1.2em;
−
     color: #222;
+
     color: #5472c3;
 
     font-weight: 600!important;
 
     font-weight: 600!important;
 
     line-height: 1.5em;
 
     line-height: 1.5em;
Line 542: Line 632:
 
}
 
}
  
−
.linkBox:hover span,
+
.linkBox-items:hover span,
−
.linkBox:hover h4 {
+
.linkBox-items:hover h4 {
−
     color: slategray;
+
     color: #7298ff;
 
}
 
}
  
Line 569: Line 659:
  
 
footer .sponsor{
 
footer .sponsor{
−
     height: 240px;
+
     height: 250px;
 +
}
 +
 
 +
footer .sponsor a>img{
 +
    opacity: 0.75;
 +
}
 +
 
 +
footer .sponsor a>img:hover{
 +
    opacity: 1;
 
}
 
}
  
Line 630: Line 728:
 
.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 639: Line 734:
 
.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 652: Line 741:
  
 
/* --------------------- */
 
/* --------------------- */
−
/* -----Tilteffect------ */
+
/* -----TiptoolAnimation------ */
−
.tiltBox
+
 
−
{
+
.tooltip__neo {
 +
position: relative;
 +
display: inline-block;
 +
}
 +
 
 +
.tooltip__trigger {
 +
cursor: pointer;
 +
position: relative;
 +
}
 +
 
 +
.tooltip__trigger-text {
 +
display: block;
 +
padding: 0.85em;
 +
pointer-events: none;
 +
}
 +
 
 +
.tooltip__base {
 +
position: absolute;
 +
bottom: 1em;
 +
left: 15%;
 +
margin-left: -150px;
 +
width: 480px;
 +
height: 360px;
 
display: flex;
 
display: flex;
 +
    align-items: center;
 +
    justify-content: center;
 +
opacity: 0;
 +
pointer-events: none;
 +
}
 +
 +
.tooltip__content {
 +
color: #4a4a4a!important;
 +
display: flex;
 +
position: relative;
 +
align-items: center;
 
justify-content: center;
 
justify-content: center;
−
margin-top: 2em;
+
width: 80%;
 +
padding: 0 1em;
 +
opacity: 0;
 +
font-size: 0.6em;
 +
    line-height: 1.2em;
 
}
 
}
 +
 +
.tooltip__shape,
 +
.tooltip__deco {
 +
position: absolute;
 +
width: 100%;
 +
height: 100%;
 +
top: 0;
 +
left: 0;
 +
}
 +
 +
.tooltip__shape {
 +
fill: #eee;
 +
}
 +
 +
/* --------------------- */
 +
/* -----Tilteffect------ */
 +
  
 
.tilter {
 
.tilter {
Line 987: Line 1,130:
 
     margin: 0;
 
     margin: 0;
 
     color: snow;
 
     color: snow;
 +
    text-shadow: 2px 2px 10px #222;
 
}
 
}
 
.headline-left{
 
.headline-left{
Line 1,000: Line 1,144:
 
}
 
}
  
−
.bannerImg {
+
#canvas {
−
    width: 100vw;
+
−
    height: 100vh;
+
 
     position: relative;
 
     position: relative;
 +
    top: 7px;
 
     overflow: hidden;
 
     overflow: hidden;
−
     background-size: cover;
+
     width: 100vw;
−
}
+
−
 
+
−
.bannerImg::before{
+
−
    content: '';
+
−
    position: absolute;
+
−
    top: 0;
+
−
    left: 0;
+
 
     height: 100vh;
 
     height: 100vh;
−
    width: 100vw;
+
     background-color: #333;
−
     background: rgba(0, 0, 0, 0.1);
+
 
}
 
}
 
/* --------- */
 
/* --------- */
Line 1,086: Line 1,221:
 
.dialog--open .dialog__content {
 
.dialog--open .dialog__content {
 
pointer-events: auto;
 
pointer-events: auto;
−
}
 
−
 
−
.dialog__description{
 
 
}
 
}
  
 
.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;
+
    color: snow;
 +
    border-radius: 5px;
 
padding: .5em;
 
padding: .5em;
 
font-family: 'montserrat';
 
font-family: 'montserrat';
Line 1,173: Line 1,306:
 
}
 
}
 
#to-top a{
 
#to-top a{
−
     color: slategray;
+
     color: #2347a3;
 
}
 
}
  
 
#to-top a:active,
 
#to-top a:active,
 
#to-top a:hover{
 
#to-top a:hover{
−
     color: var(--iGEMgreen);
+
     color: #3151a3;
 +
    ;
 
}
 
}
  
Line 1,195: Line 1,329:
 
     margin-bottom: -10px;
 
     margin-bottom: -10px;
 
}
 
}
−
 
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 08:59, 21 October 2021