Difference between revisions of "Template:Hong Kong HKUST/css style sheet"

Line 1: Line 1:
−
/*General settings*/
+
.Team > h1 {
 +
text-align: center;
 +
font-family: copperplate;
 +
font-size: 48pt;
 +
}
  
 +
.Team > h2 {
 +
text-align: left;
 +
font-family: copperplate;
 +
padding-left: 4%;
 +
}
  
−
.circular-border {
+
.DesBox > h2{
−
border-color:transparent;
+
text-align: center;
−
border-width:0px;
+
font-family: copperplate;
−
border-radius:50%;
+
font-size: 40pt;
 
}
 
}
  
−
.face-icon {
+
.DesBox > p{
−
width: 75px;
+
text-align: center;
 +
font-family: futura;
 +
font-size: 20pt;
 
}
 
}
 +
/*Classes for Main Team Page - mobile*/
 +
@media only screen and (max-width: 768px) {
 +
 +
.Team {
 +
width: 100%;
 +
height: 100%;
 +
position: relative;
 +
visibility: visible;
 +
transition-property: visibility;
 +
    }
  
−
<!--h1{
+
.TeamClick {
−
font-family: Helvetica;
+
visibility: hidden;
−
color: black;
+
 
}
 
}
−
h2 {
+
 
−
font-family: Helvetica;
+
.Icons > img{
−
color: black;
+
width: 448px;
 +
height: 335.156px;
 +
max-width: none;
 +
visibility: inherit;
 +
transition-property: inherit;
 +
transition-delay: inherit;
 
}
 
}
−
h3 {
+
 
−
font-family: Helvetica;
+
 
−
color: black;
+
.circle {
 +
cursor: pointer;
 +
height: 60px;
 +
width: 60px;
 +
background-color: transparent;
 +
border-radius: 50%;
 +
border-color: transparent;
 +
border-width: 15px;
 +
border-style: solid;
 +
position: absolute;
 +
visibility: inherit;
 +
transition-property: inherit;
 +
transition-delay: inherit;
 
}
 
}
−
p {
 
−
font-family: Helvetica;
 
−
color: black;
 
−
width: 100%;
 
 
}
 
}
−
p1{
+
 
−
      font-family: Helvetica;
+
/*Classes for Main Team Page - desktop*/
−
      color: black;
+
@media only screen and (min-width: 768px) {
−
      width: 100%;
+
 
−
      font-size: 180%;
+
.Team-d {
−
}-->
+
width: 66.2%;
−
dl{
+
height: 100%;
−
    font-family: Helvetica;
+
position: relative;
 +
visibility: visible;
 +
transition-property: visibility;
 +
left: 16.67%;
 
}
 
}
−
strong {
+
 
−
color: #000000;
+
.TeamClick-d {
 +
visibility: hidden;
 
}
 
}
−
div.profile {
+
 
 +
.Icons-d > img{
 +
width: 1180px;
 +
height: 882.781px;
 +
max-width: none;
 +
visibility: inherit;
 +
transition-property: inherit;
 +
transition-delay: inherit;
 +
}
 +
 
 +
.circle-d {
 +
cursor: pointer;
 +
height: 170px;
 +
width: 170px;
 
background-color: transparent;
 
background-color: transparent;
−
margin: 20px 0 20px 0;
+
border-radius: 50%;
−
padding: 20px;
+
border-color: transparent;
 +
border-width: 15px;
 +
border-style: solid;
 +
position: absolute;
 +
top: 780px;
 +
left: 240px;
 +
visibility: inherit;
 +
transition-property: inherit;
 +
transition-delay: inherit;
 +
}
 
}
 
}
  
  
  
−
/*Team_gallery*/
+
/*Classes for full page profiles - mobile*/
 +
@media only screen and (max-width: 768px) {
  
−
.mySlides {display:none;}
+
.Profile {
−
 
+
width: 100%;
−
/*expandable list*/
+
height: 100%;
−
 
+
position: absolute;
−
#listContainer{
+
visibility: hidden; /*Change back to hidden after test*/ //
−
  margin-top:15px;
+
transition-property: visibility;
−
}
+
transition: top ease 0.6s;
−
+
/*-webkit-transition: top ease 0.6s;*/
−
#expList ul li {
+
/*transition-delay: 0.6s; */
−
    list-style: none;
+
−
    margin:0;
+
−
    padding:0;
+
−
    cursor: pointer;
+
−
    list-style-type:none;
+
−
}
+
−
#expList p {
+
−
    margin:0;
+
−
    display:block;
+
 
}
 
}
−
#expList p:hover {
+
.ProfileClick{
−
    <!--background-color:#121212;-->
+
visibility: visible;
−
    list-style-type:none;
+
top: 0px;
 
}
 
}
−
#expList li {
 
−
    line-height:140%;
 
−
    text-indent:0px;
 
−
    background-position: 1px 8px;
 
−
    padding-left: 20px;
 
−
    background-repeat: no-repeat;
 
−
    list-style-type:none;
 
−
}
 
−
 
−
/* Collapsed state for list element */
 
−
#expList .collapsed {
 
−
    background-image: url(../img/collapsed.png);
 
  
−
}
+
.BkgdPhoto {
−
/* Expanded state for list element
+
width: 100%;
−
/* NOTE: This class must be located UNDER the collapsed one */
+
height: 100%;
−
#expList .expanded {
+
visibility: inherit;
−
    background-image: url(../img/expanded.png);
+
transition-property: inherit;
−
}
+
transition-delay: inherit;
−
#expList {
+
position: relative;
−
    clear: both;
+
 
}
 
}
  
−
.listControl{
+
.CloseBtn {
−
  margin-bottom: 15px;
+
position: fixed;
−
}
+
top: 25px;
−
.listControl a {
+
right: 29px;
−
    border: 1px solid #555555;
+
visibility: inherit;
−
    color: #555555;
+
transition-property: inherit;
−
    cursor: pointer;
+
transition-delay: inherit;
−
    height: 1.5em;
+
color: rebeccapurple;
−
    line-height: 1.5em;
+
font-size: 32px;
−
    margin-right: 5px;
+
−
    padding: 4px 10px;
+
−
}
+
−
.listControl a:hover {
+
−
    background-color:#555555;
+
−
    color:#222222;  
+
−
    font-weight:normal;
+
 
}
 
}
  
−
img.button {
+
.CloseBtn:hover {
−
    opacity: 1.0;
+
cursor: pointer;
−
    filter: alpha(opacity=100); /* For IE8 and earlier */
+
 
}
 
}
  
−
img.button:hover {
+
.GIFBox {
−
    opacity: 0.7;
+
width: 70.6%;
−
    filter: alpha(opacity=80); /* For IE8 and earlier */
+
height: 66.6%;
 +
position: absolute;
 +
top: 81px;
 +
left: 14%;
 +
visibility: inherit;
 +
transition-property: inherit;
 +
transition-delay: inherit;
 
}
 
}
  
−
/* Parts Table*/
+
/*.HiddenBkgd{
−
table.attr {
+
background-color: rgb(219, 210, 191);
−
    width:100%;
+
width: 100%;
 +
height: 190%;
 +
position: absolute;
 +
top: 47%;
 +
visibility: inherit;
 +
 
 +
}*/
 +
.DesBox {
 +
width: 70.6%;
 +
left: 14%;
 +
position: absolute;
 +
top: 49%;
 +
padding: 0px 40px;
 +
visibility: inherit;
 +
transition-property: inherit;
 +
transition-delay: inherit;
 +
 
 +
background-color: white;
 
}
 
}
−
table.attr, th.attr, td.attr {
 
−
    border: 1px solid white;
 
−
    border-collapse: collapse;
 
 
}
 
}
−
th.attr, td.attr {
+
/*Classes for full page profiles - mobile*/
−
    padding: 5px;
+
 
−
    text-align: left;
+
/*Classes for full page profiles - desktop*/
 +
@media only screen and (min-width: 768px) {
 +
 
 +
.Profile-d {
 +
width: 100%;
 +
height: 0%;
 +
/*max-height: 0;*/
 +
position: absolute;
 +
/*display: none;*/
 +
visibility: hidden; /*Change back to hidden after test*/
 +
transition-property: visibility;
 +
/*transition-delay: 0.6s; */
 
}
 
}
−
table.attr#t01 tr.attr:nth-child(even) {
+
.ProfileClick-d{
−
    background-color: #eee;
+
visibility: visible;
 +
top: 0px;
 +
height: auto;
 
}
 
}
−
table.attr#t01 tr.attr:nth-child(odd) {
+
 
−
  background-color:#fff;
+
.BkgdPhoto-d {
−
}
+
width: 100%;
−
table.attr#t01 th.attr {
+
height: 100%;
−
    background-color: black;
+
visibility: inherit;
−
    color: white;
+
transition-property: inherit;
 +
transition-delay: inherit;
 +
position: relative;
 
}
 
}
  
−
/* Medal Table*/
+
.CloseBtn-d {
−
table.medal {
+
position: fixed;
−
    font-family: arial, sans-serif;
+
top: 25px;
−
    border-collapse: collapse;
+
right: 29px;
−
    width: 30%;
+
visibility: inherit;
 +
transition-property: inherit;
 +
transition-delay: inherit;
 +
color: rebeccapurple;
 +
font-size: 32px;
 +
}
 +
.CloseBtn-d:hover {
 +
cursor: pointer;
 
}
 
}
  
−
td.medal, th.medal {
+
.GIFBox-d {
−
    border: 1px solid #dddddd;
+
width: 39.6%;
−
    text-align: left;
+
height: 39.6%;
−
    padding: 8px;
+
position: absolute;
 +
top: 352px;
 +
left: 1%;
 +
visibility: inherit;
 +
transition-property: inherit;
 +
transition-delay: inherit;
 
}
 
}
  
−
tr.medal:nth-child(even) {
+
.DesBox-d {
−
    background-color: #dddddd;
+
width: 55.6%;
 +
left: 42%;
 +
position: absolute;
 +
top: 34%;
 +
padding: 0px 40px;
 +
visibility: inherit;
 +
transition-property: inherit;
 +
transition-delay: inherit;
 +
 
 +
background-color: white;
 +
}
 
}
 
}
 +
/*Classes for full page profiles - mobile*/

Revision as of 18:24, 7 October 2016

.Team > h1 { text-align: center; font-family: copperplate; font-size: 48pt; }

.Team > h2 { text-align: left; font-family: copperplate; padding-left: 4%; }

.DesBox > h2{ text-align: center; font-family: copperplate; font-size: 40pt; }

.DesBox > p{ text-align: center; font-family: futura; font-size: 20pt; } /*Classes for Main Team Page - mobile*/ @media only screen and (max-width: 768px) {

.Team { width: 100%; height: 100%; position: relative; visibility: visible; transition-property: visibility; 

   }

.TeamClick { visibility: hidden; }

.Icons > img{ width: 448px; height: 335.156px; max-width: none; visibility: inherit; transition-property: inherit; transition-delay: inherit; }


.circle { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-color: transparent; border-width: 15px; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } }

/*Classes for Main Team Page - desktop*/ @media only screen and (min-width: 768px) {

.Team-d { width: 66.2%; height: 100%; position: relative; visibility: visible; transition-property: visibility; left: 16.67%; }

.TeamClick-d { visibility: hidden; }

.Icons-d > img{ width: 1180px; height: 882.781px; max-width: none; visibility: inherit; transition-property: inherit; transition-delay: inherit; }

.circle-d { cursor: pointer; height: 170px; width: 170px; background-color: transparent; border-radius: 50%; border-color: transparent; border-width: 15px; border-style: solid; position: absolute; top: 780px; left: 240px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } }


/*Classes for full page profiles - mobile*/ @media only screen and (max-width: 768px) {

.Profile { width: 100%; height: 100%; position: absolute; visibility: hidden; /*Change back to hidden after test*/ // transition-property: visibility; transition: top ease 0.6s; /*-webkit-transition: top ease 0.6s;*/ /*transition-delay: 0.6s; */ } .ProfileClick{ visibility: visible; top: 0px; }

.BkgdPhoto { width: 100%; height: 100%; visibility: inherit; transition-property: inherit; transition-delay: inherit; position: relative; }

.CloseBtn { position: fixed; top: 25px; right: 29px; visibility: inherit; transition-property: inherit; transition-delay: inherit; color: rebeccapurple; font-size: 32px; }

.CloseBtn:hover { cursor: pointer; }

.GIFBox { width: 70.6%; height: 66.6%; position: absolute; top: 81px; left: 14%; visibility: inherit; transition-property: inherit; transition-delay: inherit; }

/*.HiddenBkgd{ background-color: rgb(219, 210, 191); width: 100%; height: 190%; position: absolute; top: 47%; visibility: inherit;

}*/ .DesBox { width: 70.6%; left: 14%; position: absolute; top: 49%; padding: 0px 40px; visibility: inherit; transition-property: inherit; transition-delay: inherit;

background-color: white; } } /*Classes for full page profiles - mobile*/

/*Classes for full page profiles - desktop*/ @media only screen and (min-width: 768px) {

.Profile-d { width: 100%; height: 0%; /*max-height: 0;*/ position: absolute; /*display: none;*/ visibility: hidden; /*Change back to hidden after test*/ transition-property: visibility; /*transition-delay: 0.6s; */ } .ProfileClick-d{ visibility: visible; top: 0px; height: auto; }

.BkgdPhoto-d { width: 100%; height: 100%; visibility: inherit; transition-property: inherit; transition-delay: inherit; position: relative; }

.CloseBtn-d { position: fixed; top: 25px; right: 29px; visibility: inherit; transition-property: inherit; transition-delay: inherit; color: rebeccapurple; font-size: 32px; } .CloseBtn-d:hover { cursor: pointer; }

.GIFBox-d { width: 39.6%; height: 39.6%; position: absolute; top: 352px; left: 1%; visibility: inherit; transition-property: inherit; transition-delay: inherit; }

.DesBox-d { width: 55.6%; left: 42%; position: absolute; top: 34%; padding: 0px 40px; visibility: inherit; transition-property: inherit; transition-delay: inherit;

background-color: white; } } /*Classes for full page profiles - mobile*/