Difference between revisions of "Template:Virginia/styles/seqsCSS"

 
(3 intermediate revisions by the same user not shown)
Line 35: Line 35:
 
   background-color: white;
 
   background-color: white;
 
   border: solid #3B3838;
 
   border: solid #3B3838;
 +
  border-radius: 1vw;
 
   overflow: hidden;
 
   overflow: hidden;
 
}
 
}
Line 41: Line 42:
 
   position: relative;
 
   position: relative;
 
   width: 100%;
 
   width: 100%;
−
   height: 100%;
+
   height: 90%;
 
   overscroll-behavior: contain;
 
   overscroll-behavior: contain;
 
}
 
}
Line 60: Line 61:
 
   border-radius: 2px;
 
   border-radius: 2px;
 
   background-color: #716a6a;
 
   background-color: #716a6a;
 +
}
 +
 +
.seqTopBar{
 +
  position: relative;
 +
  height: 8.5vh;
 +
  max-height: 5.0625vw;
 +
  width: 100%;
 +
  border-bottom: solid #3B3838;
 +
  overflow: hidden;
 +
}
 +
 +
#seqTitle{
 +
  float: left;
 +
  width: 80%;
 +
  overflow: hidden;
 +
  font-family: 'THICCCBOI', THICCCBOI;
 +
  font-size: min(7.225vh, 4.303125vw);
 +
  padding-left: 2vw;
 +
  font-weight: bold;
 +
}
 +
 +
 +
.download{
 +
  position: relative;
 +
  top: 50%;
 +
  -ms-transform: translateY(-50%);
 +
  transform: translateY(-50%);
 +
  float: right;
 +
  height: 80%;
 +
  margin: 0 2vw 0 0px;
 +
  cursor: pointer;
 +
}
 +
 +
.download > g > path{
 +
  transition: 0.2s;
 +
}
 +
 +
.download:hover > g > path{
 +
  fill: #14ccb6;
 +
}
 +
 +
.download:active > g > path{
 +
  transition: 0s;
 +
  fill: #2eead4;
 +
}
 +
 +
table{
 +
  font-family: 'THICCCBOI', THICCBOI;
 +
  background-color: transparent;
 +
  border-collapse: collapse;
 +
  width: 94vw;
 +
  margin: 3vw 2vw 0px 3vw;
 +
}
 +
 +
td, th {
 +
  border: 1px solid #dddddd;
 +
  text-align: left;
 +
  padding: 8px;
 +
}
 +
 +
td > a{
 +
  cursor: pointer;
 +
  text-decoration: underline;
 +
  color: #0000EE;
 +
}
 +
td > a:active{
 +
  color: #eb3349;
 +
}
 +
 +
td:nth-child(2){
 +
  width: 6ch;
 +
  text-align: center;
 +
}
 +
td:nth-child(3){
 +
  width: 10ch;
 +
  text-align: center;
 +
}
 +
 +
tr:nth-child(even) {
 +
  background-color: #1099698a;
 +
}
 +
tr:nth-child(odd) {
 +
  background-color: #ffffff8a;
 +
}
 +
 +
.invalid{
 +
  visibility: hidden;
 +
  font-family: 'THICCCBOI', THICCCBOI;
 +
  font-size: 5vw;
 +
  text-align: center;
 +
  margin: auto;
 +
  top: 50%;
 +
  position: relative;
 +
  transform: translateY(-50%);
 +
  width: 80%;
 +
  padding:0px 10% 0px 10%;
 
}
 
}

Latest revision as of 00:48, 28 October 2020

body{ 

 background-image: url("T--Virginia--images--tilewhite.png"); 
 background-repeat: repeat repeat;
 background-size: 30%;
 background-color: white;

}

.genTitle{ 

 font-family: 'THICCCBOI', THICCCBOI;
 font-size: 4em;
 margin: none;
 text-align: center;
 padding: 2vh 0px 4vh 0px;

}

.genTitle::after{ 

 content: "";
 display: block;
 position: absolute;
 right: 0px;
 width: 80vw;
 height: 0;
 border-left: 1vw solid transparent;
 border-top: 0.5vw solid #3B3838;

}

.viewerHolder{ 

 position: relative;
 left: 50%;
 -ms-transform: translateX(-50%);
 transform: translateX(-50%);
 width: 90vw;
 height: 85vh;
 max-height: 50.625vw;
 background-color: white;
 border: solid #3B3838;
 border-radius: 1vw;
 overflow: hidden;

}

  1. seqVizViewer{
 position: relative;
 width: 100%;
 height: 90%;
 overscroll-behavior: contain;

}

.la-vz-linear-scroller{ 

 --scrollbarBG: #3B3838;
 --thumbBG: #716a6a;
 scrollbar-width: thin;
 scrollbar-color: #716a6a #3B3838;

} .la-vz-linear-scroller::-webkit-scrollbar { 

 width: 10px;

} .la-vz-linear-scroller::-webkit-scrollbar-track { 

 background: #3B3838;

} .la-vz-linear-scroller::-webkit-scrollbar-thumb { 

 border-radius: 2px;
 background-color: #716a6a;

}

.seqTopBar{ 

 position: relative;
 height: 8.5vh;
 max-height: 5.0625vw;
 width: 100%;
 border-bottom: solid #3B3838;
 overflow: hidden;

}

  1. seqTitle{
 float: left;
 width: 80%;
 overflow: hidden;
 font-family: 'THICCCBOI', THICCCBOI;
 font-size: min(7.225vh, 4.303125vw);
 padding-left: 2vw;
 font-weight: bold;

}


.download{ 

 position: relative;
 top: 50%;
 -ms-transform: translateY(-50%);
 transform: translateY(-50%);
 float: right;
 height: 80%;
 margin: 0 2vw 0 0px;
 cursor: pointer;

}

.download > g > path{ 

 transition: 0.2s;

}

.download:hover > g > path{ 

 fill: #14ccb6;

}

.download:active > g > path{ 

 transition: 0s;
 fill: #2eead4;

}

table{ 

 font-family: 'THICCCBOI', THICCBOI;
 background-color: transparent;
 border-collapse: collapse;
 width: 94vw;
 margin: 3vw 2vw 0px 3vw;

}

td, th { 

 border: 1px solid #dddddd;
 text-align: left;
 padding: 8px;

}

td > a{ 

 cursor: pointer;
 text-decoration: underline;
 color: #0000EE;

} td > a:active{ 

 color: #eb3349;

}

td:nth-child(2){ 

 width: 6ch;
 text-align: center;

} td:nth-child(3){ 

 width: 10ch;
 text-align: center;

}

tr:nth-child(even) { 

 background-color: #1099698a;

} tr:nth-child(odd) { 

 background-color: #ffffff8a;

}

.invalid{ 

 visibility: hidden;
 font-family: 'THICCCBOI', THICCCBOI;
 font-size: 5vw;
 text-align: center;
 margin: auto;
 top: 50%;
 position: relative;
 transform: translateY(-50%);
 width: 80%;
 padding:0px 10% 0px 10%;

}