Difference between revisions of "Template:Vilnius-Lithuania/CSS/Attributions"

m
m
 
(13 intermediate revisions by the same user not shown)
Line 9: Line 9:
 
   z-index: 2;
 
   z-index: 2;
 
   position: relative;
 
   position: relative;
 +
  background-image: url(https://static.igem.org/mediawiki/2020/6/65/T--Vilnius-Lithuania--backgroundWavesRepeat.png);
 +
  background-size: 100%;
 +
  background-repeat: repeat-y;
 
}
 
}
 
.introContainer::before {
 
.introContainer::before {
Line 51: Line 54:
 
.introContainer .bubbleHeading > div.other {
 
.introContainer .bubbleHeading > div.other {
 
   color: transparent;
 
   color: transparent;
−
   -webkit-text-stroke-width: 0.3vw;
+
   -webkit-text-stroke-width: 1.5px;
 
   -webkit-text-stroke-color: #6281EF;
 
   -webkit-text-stroke-color: #6281EF;
−
}
 
−
@media (min-aspect-ratio: 1/1) {
 
−
  .introContainer .bubbleHeading > div.other {
 
−
    color: transparent;
 
−
    -webkit-text-stroke-width: 0.3vh;
 
−
    -webkit-text-stroke-color: #6281EF;
 
−
  }
 
 
}
 
}
 
@media (min-aspect-ratio: 1/1) {
 
@media (min-aspect-ratio: 1/1) {
Line 66: Line 62:
 
     height: 64vh;
 
     height: 64vh;
 
   }
 
   }
 +
}
 +
 +
.milkWave {
 +
  z-index: 2;
 +
  width: 100%;
 +
  top: 0;
 +
  height: calc(100vh - 18px);
 +
  position: absolute;
 +
  content: "";
 +
  pointer-events: none;
 +
  background-position: bottom;
 +
  background-origin: border-box;
 +
  background-size: 100%;
 +
  background-repeat: no-repeat;
 +
  background-image: url(https://static.igem.org/mediawiki/2020/e/e7/T--Vilnius-Lithuania--milkTeam.svg);
 
}
 
}
  
 
main {
 
main {
−
   background-color: #121212;
+
   background-image: url(https://static.igem.org/mediawiki/2020/4/4b/T--Vilnius-Lithuania--backgroundWavesWhiteFade.png), url(https://static.igem.org/mediawiki/2020/8/82/T--Vilnius-Lithuania--backgroundWavesWhite.png);
 +
  background-repeat: no-repeat, repeat-y;
 +
  background-size: 100%, 100%;
 
   justify-content: center;
 
   justify-content: center;
 
   padding-top: 50px;
 
   padding-top: 50px;
Line 76: Line 89:
 
   flex-direction: column;
 
   flex-direction: column;
 
   align-items: center;
 
   align-items: center;
 +
}
 +
@media (max-width: 800px) {
 +
  main .contentBlock {
 +
    width: 100%;
 +
  }
 +
}
 +
@media (max-width: 1024px) {
 +
  main .contentBlock {
 +
    margin-right: unset;
 +
    margin-left: 5vw;
 +
  }
 +
}
 +
@media (max-width: 800px) {
 +
  main .contentBlock {
 +
    margin-left: unset;
 +
  }
 
}
 
}
 
main .content {
 
main .content {
 
   margin-right: unset;
 
   margin-right: unset;
−
   box-shadow: unset;
+
   background-color: #FAFAFC;
−
  color: #FAFAFC;
+
−
  background-color: #222222;
+
 
}
 
}
 
@media (max-width: 800px) {
 
@media (max-width: 800px) {
Line 87: Line 114:
 
     margin: unset;
 
     margin: unset;
 
     border-radius: unset;
 
     border-radius: unset;
−
     padding: 20px;
+
     padding: 20px 10%;
 
     width: 100%;
 
     width: 100%;
 
     box-sizing: border-box;
 
     box-sizing: border-box;
Line 94: Line 121:
 
main div.table {
 
main div.table {
 
   margin-top: 32px;
 
   margin-top: 32px;
−
   max-width: 90vw;
+
   max-width: calc(100% - 350px);
 
   overflow: auto;
 
   overflow: auto;
 
}
 
}
Line 109: Line 136:
 
main div.table::-webkit-scrollbar-corner {
 
main div.table::-webkit-scrollbar-corner {
 
   background: transparent;
 
   background: transparent;
 +
}
 +
@media (max-aspect-ratio: 1/1) {
 +
  main div.table {
 +
    max-width: calc(90% - 40px);
 +
  }
 
}
 
}
 
main table, #HQ_page main table {
 
main table, #HQ_page main table {
 
   background: none;
 
   background: none;
 
   border: unset;
 
   border: unset;
 +
  border-bottom: 3px solid #eeeeee;
 
   margin: 0;
 
   margin: 0;
 
   border-collapse: collapse;
 
   border-collapse: collapse;
 
   text-align: center;
 
   text-align: center;
−
   font-size: 0.9em;
+
   font-size: 0.7em;
 +
}
 +
main table tbody, #HQ_page main table tbody {
 +
  border-right: 3px solid #eeeeee;
 
}
 
}
 
main table .alt, #HQ_page main table .alt {
 
main table .alt, #HQ_page main table .alt {
−
   background-color: #222222;
+
   background-color: #eeeeee;
 
}
 
}
 
main table tr.divide, #HQ_page main table tr.divide {
 
main table tr.divide, #HQ_page main table tr.divide {
−
   border-top: 3px solid #222222;
+
   border-top: 3px solid #eeeeee;
 
}
 
}
 
main table td, #HQ_page main table td, main table th, #HQ_page main table th, #HQ_page main table td, #HQ_page #HQ_page main table td, #HQ_page main table th, #HQ_page #HQ_page main table th {
 
main table td, #HQ_page main table td, main table th, #HQ_page main table th, #HQ_page main table td, #HQ_page #HQ_page main table td, #HQ_page main table th, #HQ_page #HQ_page main table th {
 
   border: unset;
 
   border: unset;
 
   vertical-align: middle;
 
   vertical-align: middle;
−
   background-color: #121212;
+
   background-color: #FAFAFC;
−
   color: #FAFAFC;
+
   color: #121212;
−
   padding: 6px;
+
   padding: 5px;
 
}
 
}
 
main table td > div, #HQ_page main table td > div, main table th > div, #HQ_page main table th > div, #HQ_page main table td > div, #HQ_page #HQ_page main table td > div, #HQ_page main table th > div, #HQ_page #HQ_page main table th > div {
 
main table td > div, #HQ_page main table td > div, main table th > div, #HQ_page main table th > div, #HQ_page main table td > div, #HQ_page #HQ_page main table td > div, #HQ_page main table th > div, #HQ_page #HQ_page main table th > div {
 
   display: inline-block;
 
   display: inline-block;
−
   width: 16px;
+
   width: 11px;
−
   height: 16px;
+
   height: 11px;
 
   border-radius: 1000px;
 
   border-radius: 1000px;
 
   background-color: #2E64EC;
 
   background-color: #2E64EC;
Line 141: Line 177:
 
   position: sticky;
 
   position: sticky;
 
   left: 0px;
 
   left: 0px;
−
   background: #121212;
+
   background: #FAFAFC;
 
   cursor: pointer;
 
   cursor: pointer;
 
   transition: color 0.3s;
 
   transition: color 0.3s;
 
}
 
}
 
main table tbody th:last-of-type.alt, #HQ_page main table tbody th:last-of-type.alt, #HQ_page main table tbody th:last-of-type.alt, #HQ_page #HQ_page main table tbody th:last-of-type.alt {
 
main table tbody th:last-of-type.alt, #HQ_page main table tbody th:last-of-type.alt, #HQ_page main table tbody th:last-of-type.alt, #HQ_page #HQ_page main table tbody th:last-of-type.alt {
−
   background: linear-gradient(270deg, #222222, #121212);
+
   background: linear-gradient(270deg, #eeeeee, #FAFAFC);
 
}
 
}
 
main table tbody th:last-of-type:hover, #HQ_page main table tbody th:last-of-type:hover, #HQ_page main table tbody th:last-of-type:hover, #HQ_page #HQ_page main table tbody th:last-of-type:hover {
 
main table tbody th:last-of-type:hover, #HQ_page main table tbody th:last-of-type:hover, #HQ_page main table tbody th:last-of-type:hover, #HQ_page #HQ_page main table tbody th:last-of-type:hover {
−
   color: #FFD762;
+
   color: #2E64EC;
 
}
 
}
 
main table .cat, main table .excl, #HQ_page main table .cat, #HQ_page main table .excl {
 
main table .cat, main table .excl, #HQ_page main table .cat, #HQ_page main table .excl {
−
   border-left: 3px solid #222222;
+
   border-left: 3px solid #eeeeee;
−
}
+
−
main table tr:last-of-type, #HQ_page main table tr:last-of-type {
+
−
  border-bottom: 3px solid #222222;
+
 
}
 
}
 
main table thead th, #HQ_page main table thead th, #HQ_page main table thead th, #HQ_page #HQ_page main table thead th {
 
main table thead th, #HQ_page main table thead th, #HQ_page main table thead th, #HQ_page #HQ_page main table thead th {
−
   background-color: #121212;
+
   background-color: unset;
 
   position: sticky;
 
   position: sticky;
 
   top: 0px;
 
   top: 0px;
 
   z-index: 2;
 
   z-index: 2;
 
   left: unset;
 
   left: unset;
−
   min-width: 60px;
+
   min-width: 40px;
 +
}
 +
main table.justtable, #HQ_page main table.justtable {
 +
  margin: 0 2px;
 +
  border-bottom: 3px solid #eeeeee;
 +
  font-size: 0.9rem;
 +
  width: 99%;
 +
}
 +
main table.justtable td, #HQ_page main table.justtable td, main table.justtable th, #HQ_page main table.justtable th, #HQ_page main table.justtable td, #HQ_page #HQ_page main table.justtable td, #HQ_page main table.justtable th, #HQ_page #HQ_page main table.justtable th {
 +
  padding: 8px;
 +
}
 +
main table.justtable tr td, #HQ_page main table.justtable tr td {
 +
  background-color: #2E64EC;
 +
  color: transparent;
 +
}
 +
main table.justtable tr td:empty, #HQ_page main table.justtable tr td:empty {
 +
  background-color: #FAFAFC;
 +
}
 +
main table.justtable tr:nth-child(2n) td, #HQ_page main table.justtable tr:nth-child(2n) td {
 +
  background-color: #6281EF;
 +
}
 +
main table.justtable tr:nth-child(2n) td:empty, #HQ_page main table.justtable tr:nth-child(2n) td:empty {
 +
  background-color: #FAFAFC;
 +
}
 +
main table.justtable tr th, #HQ_page main table.justtable tr th {
 +
  background-color: #FAFAFC;
 +
}
 +
main table.justtable tbody th:last-of-type, #HQ_page main table.justtable tbody th:last-of-type, #HQ_page main table.justtable tbody th:last-of-type, #HQ_page #HQ_page main table.justtable tbody th:last-of-type {
 +
  cursor: unset;
 +
  white-space: nowrap;
 +
}
 +
main table.justtable tbody th:last-of-type:hover, #HQ_page main table.justtable tbody th:last-of-type:hover, #HQ_page main table.justtable tbody th:last-of-type:hover, #HQ_page #HQ_page main table.justtable tbody th:last-of-type:hover {
 +
  color: #121212;
 +
}
 +
main table.justtable tbody tr, #HQ_page main table.justtable tbody tr {
 +
  border: 3px solid #eeeeee;
 +
  border-bottom: unset;
 +
}
 +
main table.justtable thead tr th, #HQ_page main table.justtable thead tr th {
 +
  background-color: unset;
 +
}
 +
main .listHelpers {
 +
  display: flex;
 +
  flex-direction: column;
 +
}
 +
main .listHelpers > .helper {
 +
  display: flex;
 +
  flex-direction: row;
 +
  align-items: center;
 +
}
 +
main .listHelpers > .helper + .helper {
 +
  margin-top: 24px;
 +
}
 +
main .listHelpers > .helper img {
 +
  background-color: #FAFAFC;
 +
  width: 200px;
 +
  height: 200px;
 +
  border-radius: 1000px;
 +
  margin-right: 32px;
 +
  box-shadow: 5px 5px 7px #00000029;
 +
}
 +
@media (max-width: 600px) {
 +
  main .listHelpers > .helper {
 +
    flex-direction: column;
 +
  }
 +
  main .listHelpers > .helper img {
 +
    margin-right: unset;
 +
    margin-bottom: 16px;
 +
  }
 
}
 
}

Latest revision as of 17:50, 27 October 2020

body, html { 

 margin: 0;
 padding: 0;
 color: #222222;
 font-family: "lato-regular";

}

.introContainer { 

 z-index: 2;
 position: relative;
 background-image: url(T--Vilnius-Lithuania--backgroundWavesRepeat.png);
 background-size: 100%;
 background-repeat: repeat-y;

} .introContainer::before { 

 background-image: unset;
 border-bottom: unset;

} .introContainer .bubblePhoto { 

 background-image: url(T--Vilnius-Lithuania--cover14.jpg);
 background-attachment: fixed;
 background-position: 0px 0px;
 position: absolute;
 width: 64vw;
 height: 64vw;

} @media (min-aspect-ratio: 1/1) { 

 .introContainer .bubblePhoto {
   width: 64vh;
   height: 64vh;
 }

} .introContainer .bubbleHeading { 

 background-color: white;
 width: 64vw;
 height: 64vw;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;

} .introContainer .bubbleHeading > div { 

 color: #6281EF;
 font-family: "montserrat-black";
 font-size: 6.5vw;
 line-height: 0.9;
 text-transform: uppercase;

} @media (min-aspect-ratio: 1/1) { 

 .introContainer .bubbleHeading > div {
   font-size: 6.5vh;
 }

} .introContainer .bubbleHeading > div.other { 

 color: transparent;
 -webkit-text-stroke-width: 1.5px;
 -webkit-text-stroke-color: #6281EF;

} @media (min-aspect-ratio: 1/1) { 

 .introContainer .bubbleHeading {
   width: 64vh;
   height: 64vh;
 }

}

.milkWave { 

 z-index: 2;
 width: 100%;
 top: 0;
 height: calc(100vh - 18px);
 position: absolute;
 content: "";
 pointer-events: none;
 background-position: bottom;
 background-origin: border-box;
 background-size: 100%;
 background-repeat: no-repeat;
 background-image: url(https://static.igem.org/mediawiki/2020/e/e7/T--Vilnius-Lithuania--milkTeam.svg);

}

main { 

 background-image: url(T--Vilnius-Lithuania--backgroundWavesWhiteFade.png), url(T--Vilnius-Lithuania--backgroundWavesWhite.png);
 background-repeat: no-repeat, repeat-y;
 background-size: 100%, 100%;
 justify-content: center;
 padding-top: 50px;
 padding-bottom: 72px;
 z-index: unset;
 flex-direction: column;
 align-items: center;

} @media (max-width: 800px) { 

 main .contentBlock {
   width: 100%;
 }

} @media (max-width: 1024px) { 

 main .contentBlock {
   margin-right: unset;
   margin-left: 5vw;
 }

} @media (max-width: 800px) { 

 main .contentBlock {
   margin-left: unset;
 }

} main .content { 

 margin-right: unset;
 background-color: #FAFAFC;

} @media (max-width: 800px) { 

 main .content {
   margin: unset;
   border-radius: unset;
   padding: 20px 10%;
   width: 100%;
   box-sizing: border-box;
 }

} main div.table { 

 margin-top: 32px;
 max-width: calc(100% - 350px);
 overflow: auto;

} main div.table::-webkit-scrollbar { 

 background-color: transparent;
 border-radius: 10px;
 height: 8px;
 width: 8px;

} main div.table::-webkit-scrollbar-thumb { 

 background-color: #444444;
 border-radius: 10px;

} main div.table::-webkit-scrollbar-corner { 

 background: transparent;

} @media (max-aspect-ratio: 1/1) { 

 main div.table {
   max-width: calc(90% - 40px);
 }

} main table, #HQ_page main table { 

 background: none;
 border: unset;
 border-bottom: 3px solid #eeeeee;
 margin: 0;
 border-collapse: collapse;
 text-align: center;
 font-size: 0.7em;

} main table tbody, #HQ_page main table tbody { 

 border-right: 3px solid #eeeeee;

} main table .alt, #HQ_page main table .alt { 

 background-color: #eeeeee;

} main table tr.divide, #HQ_page main table tr.divide { 

 border-top: 3px solid #eeeeee;

} main table td, #HQ_page main table td, main table th, #HQ_page main table th, #HQ_page main table td, #HQ_page #HQ_page main table td, #HQ_page main table th, #HQ_page #HQ_page main table th { 

 border: unset;
 vertical-align: middle;
 background-color: #FAFAFC;
 color: #121212;
 padding: 5px;

} main table td > div, #HQ_page main table td > div, main table th > div, #HQ_page main table th > div, #HQ_page main table td > div, #HQ_page #HQ_page main table td > div, #HQ_page main table th > div, #HQ_page #HQ_page main table th > div { 

 display: inline-block;
 width: 11px;
 height: 11px;
 border-radius: 1000px;
 background-color: #2E64EC;

} main table tbody th:last-of-type, #HQ_page main table tbody th:last-of-type, #HQ_page main table tbody th:last-of-type, #HQ_page #HQ_page main table tbody th:last-of-type { 

 position: sticky;
 left: 0px;
 background: #FAFAFC;
 cursor: pointer;
 transition: color 0.3s;

} main table tbody th:last-of-type.alt, #HQ_page main table tbody th:last-of-type.alt, #HQ_page main table tbody th:last-of-type.alt, #HQ_page #HQ_page main table tbody th:last-of-type.alt { 

 background: linear-gradient(270deg, #eeeeee, #FAFAFC);

} main table tbody th:last-of-type:hover, #HQ_page main table tbody th:last-of-type:hover, #HQ_page main table tbody th:last-of-type:hover, #HQ_page #HQ_page main table tbody th:last-of-type:hover { 

 color: #2E64EC;

} main table .cat, main table .excl, #HQ_page main table .cat, #HQ_page main table .excl { 

 border-left: 3px solid #eeeeee;

} main table thead th, #HQ_page main table thead th, #HQ_page main table thead th, #HQ_page #HQ_page main table thead th { 

 background-color: unset;
 position: sticky;
 top: 0px;
 z-index: 2;
 left: unset;
 min-width: 40px;

} main table.justtable, #HQ_page main table.justtable { 

 margin: 0 2px;
 border-bottom: 3px solid #eeeeee;
 font-size: 0.9rem;
 width: 99%;

} main table.justtable td, #HQ_page main table.justtable td, main table.justtable th, #HQ_page main table.justtable th, #HQ_page main table.justtable td, #HQ_page #HQ_page main table.justtable td, #HQ_page main table.justtable th, #HQ_page #HQ_page main table.justtable th { 

 padding: 8px;

} main table.justtable tr td, #HQ_page main table.justtable tr td { 

 background-color: #2E64EC;
 color: transparent;

} main table.justtable tr td:empty, #HQ_page main table.justtable tr td:empty { 

 background-color: #FAFAFC;

} main table.justtable tr:nth-child(2n) td, #HQ_page main table.justtable tr:nth-child(2n) td { 

 background-color: #6281EF;

} main table.justtable tr:nth-child(2n) td:empty, #HQ_page main table.justtable tr:nth-child(2n) td:empty { 

 background-color: #FAFAFC;

} main table.justtable tr th, #HQ_page main table.justtable tr th { 

 background-color: #FAFAFC;

} main table.justtable tbody th:last-of-type, #HQ_page main table.justtable tbody th:last-of-type, #HQ_page main table.justtable tbody th:last-of-type, #HQ_page #HQ_page main table.justtable tbody th:last-of-type { 

 cursor: unset;
 white-space: nowrap;

} main table.justtable tbody th:last-of-type:hover, #HQ_page main table.justtable tbody th:last-of-type:hover, #HQ_page main table.justtable tbody th:last-of-type:hover, #HQ_page #HQ_page main table.justtable tbody th:last-of-type:hover { 

 color: #121212;

} main table.justtable tbody tr, #HQ_page main table.justtable tbody tr { 

 border: 3px solid #eeeeee;
 border-bottom: unset;

} main table.justtable thead tr th, #HQ_page main table.justtable thead tr th { 

 background-color: unset;

} main .listHelpers { 

 display: flex;
 flex-direction: column;

} main .listHelpers > .helper { 

 display: flex;
 flex-direction: row;
 align-items: center;

} main .listHelpers > .helper + .helper { 

 margin-top: 24px;

} main .listHelpers > .helper img { 

 background-color: #FAFAFC;
 width: 200px;
 height: 200px;
 border-radius: 1000px;
 margin-right: 32px;
 box-shadow: 5px 5px 7px #00000029;

} @media (max-width: 600px) { 

 main .listHelpers > .helper {
   flex-direction: column;
 }
 main .listHelpers > .helper img {
   margin-right: unset;
   margin-bottom: 16px;
 }

}