Team:Concordia/CSS/Base

From 2013.igem.org

(Difference between revisions)
(New css)
Line 10: Line 10:
* { margin: 0; padding: 0; }
* { margin: 0; padding: 0; }
 +
 +
.invisible {
 +
    display: none;
 +
}
 +
 +
.wrapper {
 +
    overflow: hidden;
 +
}
 +
 +
.content {
 +
    margin-left: 16.6667%;
 +
}
 +
body.index {
body.index {
-
overflow: hidden;
+
    overflow: hidden;
 +
    background-image: none;
 +
}
 +
 
 +
body.team-page {
 +
    background: #333;
 +
}
 +
 
 +
body.team-page .content {
 +
    background-image: url('../images/geometry.png');
 +
    background-repeat: repeat-x repeat-y;
 +
    background-position: center;
 +
    background-attachment: fixed;
}
}
-
.contents, body>.container {
+
.contents, body {
-
        background-image: url('../images/geometry.png');
+
    background-image: url('../images/geometry.png');
-
background-repeat: repeat-x repeat-y;
+
    background-repeat: repeat-x repeat-y;
-
background-position: center;
+
    background-position: center;
-
background-attachment: fixed;
+
    background-attachment: fixed;
}
}
.contents.project {
.contents.project {
-
        background-image: url("../images/lab_setup.jpg");
+
    background-image: url("../images/lab_setup.jpg");
-
background-repeat: repeat-x repeat-y;
+
-
background-position: center;
+
-
background-attachment: fixed;
+
}
}
.contents.notebook {
.contents.notebook {
-
        background-image: url("../images/modeling.jpg");
+
    background-image: url("../images/modeling.jpg");
-
background-repeat: no-repeat;
+
-
background-position: center;
+
-
background-attachment: fixed;
+
}
}
Line 43: Line 62:
.ctrl {
.ctrl {
-
position: absolute;
+
    position: absolute;
-
top: 30%; left: 40%;
+
    top: 30%; left: 40%;
-
font: 1.5em/1.13 Verdana, sans-serif;
+
    font: 1.5em/1.13 Verdana, sans-serif;
-
transition: .5s;
+
    transition: .5s;
}
}
 +
 +
a.ctrl {
 +
    -moz-box-shadow:    inset 0 0 10px rgba(50,50,50,0.75);
 +
    -webkit-box-shadow: inset 0 0 10px rgba(50,50,50,0.75);
 +
    box-shadow:        inset 0 0 10px rgba(50,50,50,0.75);
 +
}
 +
/* generic link styles */
/* generic link styles */
a.ctrl, .ctrl a {
a.ctrl, .ctrl a {
-
display: block;
+
    display: block;
-
opacity: .56;
+
    opacity: .56;
-
background: #c9c9c9;
+
    background: #c9c9c9;
-
color: #7a8092;
+
    color: #7a8092;
-
background-image: url('../images/logo_b_w.png');
+
    background-image: url('../images/logo_b_w.png');
-
background-size: 12.5em;
+
    background-size: 12.5em;
-
background-repeat: no-repeat;
+
    background-repeat: no-repeat;
-
text-align: center;
+
    text-align: center;
-
vertical-align: center;
+
    vertical-align: center;
-
text-decoration: none;
+
    text-decoration: none;
-
text-shadow: 0 -1px dimgrey;
+
    text-shadow: 0 -1px dimgrey;
}
}
a.ctrl:hover, a.ctrl:focus {  
a.ctrl:hover, a.ctrl:focus {  
-
background-image: url('../images/logo.png');
+
    background-image: url('../images/logo.png');
-
opacity: 1;  
+
    opacity: 1;
 +
    -moz-box-shadow:    0 0 10px rgba(50,50,50,0.75);
 +
    -webkit-box-shadow: 0 0 10px rgba(50,50,50,0.75);
 +
    box-shadow:        0 0 10px rgba(50,50,50,0.75);
}
}
.ctrl a:hover, .ctrl a:focus {
.ctrl a:hover, .ctrl a:focus {
-
        opacity: 1;
+
    opacity: 1;
}
}
a.ctrl:focus, .ctrl a:focus { outline: none; }
a.ctrl:focus, .ctrl a:focus { outline: none; }
.button {
.button {
-
z-index: 2;
+
    z-index: 2;
-
margin: -.625em;
+
    margin: -.625em;
-
width: 12.5em; height: 12.5em;
+
    width: 12.5em; height: 12.5em;
-
border-radius: 50%;
+
    border-radius: 50%;
-
box-shadow: 0 0 3px 1px white;
+
    box-shadow: 0 0 3px 1px white;
}
}
/* circular menu */
/* circular menu */
.tip {
.tip {
-
z-index: 1;
+
    z-index: 1;
-
/**outline: dotted 1px white;/**/
+
    /**outline: dotted 1px white;/**/
-
margin: -5em;
+
    margin: -5em;
-
margin-left: -9em;
+
    margin-left: -9em;
-
left: 43%;
+
    left: 43%;
-
top: 30%;
+
    top: 30%;
-
width: 25em; height: 25em;
+
    width: 25em; height: 25em;
-
transform: scale(.001);
+
    transform: scale(.001);
-
-ms-transform: scale(.001);
+
    -ms-transform: scale(.001);
-
-webkit-transform: scale(.001);
+
    -webkit-transform: scale(.001);
-
list-style: none;
+
    list-style: none;
-
opacity: 0;
+
    opacity: 0;
}
}
-
/* the ends of the menu */
 
-
/*
 
-
.tip:before, .tip:after {
 
-
position: absolute;
 
-
top: 34.3%;
 
-
width: .5em; height: 14%;
 
-
opacity: .56;
 
-
background: #c9c9c9;
 
-
content: '';
 
-
}
 
-
.tip:before {
 
-
left: 5.4%;
 
-
border-radius: .25em 0 0 .25em;
 
-
box-shadow: -1px 0 1px dimgrey, inset 1px 0 1px white, inset -1px 0 1px grey,
 
-
inset 0 1px 1px white, inset 0 -1px 1px white;
 
-
transform: rotate(-75deg);
 
-
}
 
-
.tip:after {
 
-
right: 5.4%;
 
-
border-radius: 0 .25em .25em 0;
 
-
box-shadow: 1px 0 1px dimgrey, inset -1px 0 1px white, inset 1px 0 1px grey,
 
-
inset 0 1px 1px white, inset 0 -1px 1px white;
 
-
transform: rotate(75deg);
 
-
}
 
-
*/
 
/* make the menu appear on click */
/* make the menu appear on click */
.button:focus + .tip {
.button:focus + .tip {
-
        transform: scale(1);
+
    transform: scale(1);
-
        -ms-transform: scale(1);
+
    -ms-transform: scale(1);
-
        -webkit-transform: scale(1);
+
    -webkit-transform: scale(1);
-
        opacity: 1;
+
    opacity: 1;
}
}
/* slices of the circular menu */
/* slices of the circular menu */
.slice {
.slice {
-
overflow: hidden;
+
    overflow: hidden;
-
position: absolute;
+
    position: absolute;
-
/**outline: dotted 1px yellow;/**/
+
    /**outline: dotted 1px yellow;/**/
-
width: 50%; height: 50%;
+
    width: 50%; height: 50%;
-
transform-origin: 100% 100%;
+
    transform-origin: 100% 100%;
-
-ms-transform-origin: 100% 100%;
+
    -ms-transform-origin: 100% 100%;
-
-webkit-transform-origin: 100% 100%;
+
    -webkit-transform-origin: 100% 100%;
}
}
/*  
/*  
Line 174: Line 178:
   star button & menu links; give them a red background to see them */
   star button & menu links; give them a red background to see them */
.slice:after {
.slice:after {
-
position: absolute;
+
    position: absolute;
-
top: 32%; left: 32%;
+
    top: 32%; left: 32%;
-
width: 136%; height: 136%;
+
    width: 136%; height: 136%;
-
border-radius: 50%;
+
    border-radius: 50%;
-
/* "unskew" = skew by minus the same angle by which parent was skewed */
+
    /* "unskew" = skew by minus the same angle by which parent was skewed */
-
transform: skewY(-60deg);
+
    transform: skewY(-60deg);
-
content: '';
+
    content: '';
}
}
/* menu links */
/* menu links */
.slice a {
.slice a {
-
width: 200%; height: 200%;
+
    width: 200%; height: 200%;
-
border-radius: 50%;
+
    border-radius: 50%;
-
box-shadow: 0 0 3px dimgrey, inset 0 0 4px white;
+
    box-shadow: 0 0 3px dimgrey, inset 0 0 4px white;
-
/* "unskew" & rotate by -A°/2 */
+
    /* "unskew" & rotate by -A°/2 */
-
transform: skewY(-60deg) rotate(-15deg);
+
    transform: skewY(-60deg) rotate(-15deg);
-
-ms-transform: skewY(-60deg) rotate(-15deg);
+
    -ms-transform: skewY(-60deg) rotate(-15deg);
-
-webkit-transform: skewY(-60deg) rotate(-15deg);
+
    -webkit-transform: skewY(-60deg) rotate(-15deg);
-
background: /* lateral separators */
+
    background: /* lateral separators */
-
linear-gradient(75deg,  
+
    linear-gradient(75deg,  
-
transparent 50%, grey 50%, transparent 54%) no-repeat 36.5% 0,
+
    transparent 50%, grey 50%, transparent 54%) no-repeat 36.5% 0,
-
linear-gradient(-75deg,  
+
    linear-gradient(-75deg,  
-
transparent 50%, grey 50%, transparent 54%) no-repeat 63.5% 0,
+
    transparent 50%, grey 50%, transparent 54%) no-repeat 63.5% 0,
-
/* make sure inner part is transparent */
+
    /* make sure inner part is transparent */
-
radial-gradient(rgba(127,127,127,0) 49%,  
+
    radial-gradient(rgba(127,127,127,0) 49%,  
-
rgba(255,255,255,.7) 51%, #c9c9c9 52%);
+
    rgba(255,255,255,.7) 51%, #c9c9c9 52%);
-
background-size: 15% 15%, 15% 15%, cover;
+
    background-size: 15% 15%, 15% 15%, cover;
-
line-height: 3;
+
    line-height: 3;
-
vertical
+
    vertical
}
}
/* arrow for middle link */
/* arrow for middle link */
.slice:nth-child(3) a:after {
.slice:nth-child(3) a:after {
-
position: absolute;
+
    position: absolute;
-
top: 13%; left: 50%;
+
    top: 13%; left: 50%;
-
margin: -.25em;
+
    margin: -.25em;
-
width: .5em; height: .5em;
+
    width: .5em; height: .5em;
-
box-shadow: 2px 2px 2px white;
+
    box-shadow: 2px 2px 2px white;
-
transform: rotate(45deg);
+
    transform: rotate(45deg);
-
-ms-transform: rotate(45deg);
+
    -ms-transform: rotate(45deg);
-
-webkit-transform: rotate(45deg);
+
    -webkit-transform: rotate(45deg);
-
background: linear-gradient(-45deg, #c9c9c9 50%, transparent 50%);
+
    background: linear-gradient(-45deg, #c9c9c9 50%, transparent 50%);
-
content: '';
+
    content: '';
}
}
Line 237: Line 241:
}
}
-
/* Meny */
+
/* Site-menu */
-
/********/
+
/*************/
-
.meny {
+
.site-menu {
-
     background-color: #4A4446;
+
    width: 15%;
 +
    height: 100%;
 +
     background: #333;
 +
    color: #eee;
 +
    -webkit-box-sizing: border-box;
 +
    -moz-box-sizing: border-box;
 +
    box-sizing: border-box;
 +
    margin-bottom: -5000px;
 +
    padding-bottom: 5000px;
 +
}
 +
 
 +
.site-menu-content {
 +
    height: 100%;
 +
}
 +
 
 +
.site-menu ul {
 +
    margin-top: 10px;
 +
}
 +
.site-menu ul li {
 +
    display: inline-block;
 +
    width: 200px;
 +
    list-style: none;
 +
    font-size: 20px;
 +
    padding: 3px 10px;
 +
}
 +
.site-menu ul li:before {
 +
    content: '-';
 +
    margin-right: 5px;
 +
    color: rgba( 255, 255, 255, 0.2 );
 +
}
 +
 
 +
body.index .site-menu-logo {
 +
    display:none;
 +
}
 +
 
 +
.site-menu-logo {
 +
    width: 100%;
 +
}
 +
 
 +
/* Team page */
 +
/*************/
 +
 
 +
.team-cat-wrapper {
 +
    float:left;
 +
    display: block;
 +
}
 +
 
 +
.team-member {
 +
    background: none repeat scroll 0 0 #FFFFFF;
 +
    border-bottom: 1px solid #DDDDDD;
 +
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
 +
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
 +
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
 +
    margin: 2.5%;
 +
    cursor: pointer;
 +
}
 +
 
 +
.team-member-img-wrap {
 +
    width: 90%;
 +
    margin: 0 auto;
 +
}
 +
 
 +
.team-member-img {
 +
    padding-top: 2%;
 +
    display: block;
 +
    width: 75%;
 +
    margin: 0 auto;
 +
}
 +
 
 +
.team-member-desc{
 +
    width: 85%;
 +
    margin: 0 auto;
 +
    text-align: center;
 +
}
 +
 
 +
.avgrund-popup {
 +
    width: 70%;
 +
}
 +
 
 +
.avgrund-popup .team-member-modal-img-wrap {
 +
    display: block;
 +
    float: right;
 +
}
 +
 
 +
.avgrund-popup .team-member-modal-img {
 +
    width: 250px;
 +
    margin-left: 15px;
 +
}
 +
 
 +
/* Notebook page */
 +
/*****************/
 +
 
 +
.log {
 +
    background: none repeat scroll 0 0 #FFFFFF;
 +
    border-bottom: 1px solid #DDDDDD;
 +
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
 +
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
 +
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
 +
    margin: 2.5%;
 +
}
 +
 
 +
.log-img-wrap{
 +
    width: 90%;
 +
}
 +
 
 +
.log-img{
 +
    padding-top: 2%;
 +
    display: block;
 +
    width: 75%;
 +
}
 +
 
 +
.log-desc {
 +
    padding-top: 15px;
 +
}
 +
 
 +
.log-left {
 +
    width:90%;
 +
}
 +
 
 +
.log-right{
 +
    width: 90%;
 +
    margin-left: 22.5%;
}
}

Revision as of 19:09, 19 September 2013

/* Reset MediaWiki CSS */ /**********************/

  1. contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo { 
   display:none;}
  1. top-section { 
   border: none;
   height: 0px;}
  1. content { 
   border: none;}
  • { margin: 0; padding: 0; }

.invisible { 

   display: none;

}

.wrapper { 

   overflow: hidden;

}

.content { 

   margin-left: 16.6667%;

}

body.index { 

   overflow: hidden;
   background-image: none;

}

body.team-page { 

   background: #333;

}

body.team-page .content { 

   background-image: url('../images/geometry.png');
   background-repeat: repeat-x repeat-y;
   background-position: center;
   background-attachment: fixed;

}

.contents, body { 

   background-image: url('../images/geometry.png');
   background-repeat: repeat-x repeat-y;
   background-position: center;
   background-attachment: fixed;

}

.contents.project { 

   background-image: url("../images/lab_setup.jpg");

}

.contents.notebook { 

   background-image: url("../images/modeling.jpg");

}

/* Radial menu CSS */ /*******************/ /* generic styles for button & circular menu */ .radial-menu-container { 

   height: 100%;

}

.ctrl { 

   position: absolute;
   top: 30%; left: 40%;
   font: 1.5em/1.13 Verdana, sans-serif;
   transition: .5s;

}

a.ctrl { 

   -moz-box-shadow:    inset 0 0 10px rgba(50,50,50,0.75);
   -webkit-box-shadow: inset 0 0 10px rgba(50,50,50,0.75);
   box-shadow:         inset 0 0 10px rgba(50,50,50,0.75);

}

/* generic link styles */ a.ctrl, .ctrl a { 

   display: block;
   opacity: .56;
   background: #c9c9c9;
   color: #7a8092;
   background-image: url('../images/logo_b_w.png');
   background-size: 12.5em;
   background-repeat: no-repeat;
   text-align: center;
   vertical-align: center;
   text-decoration: none;
   text-shadow: 0 -1px dimgrey;

} a.ctrl:hover, a.ctrl:focus { 

   background-image: url('../images/logo.png');
   opacity: 1;
   -moz-box-shadow:    0 0 10px rgba(50,50,50,0.75);
   -webkit-box-shadow: 0 0 10px rgba(50,50,50,0.75);
   box-shadow:         0 0 10px rgba(50,50,50,0.75);

}

.ctrl a:hover, .ctrl a:focus { 

   opacity: 1;

} a.ctrl:focus, .ctrl a:focus { outline: none; } .button { 

   z-index: 2;
   margin: -.625em;
   width: 12.5em; height: 12.5em;
   border-radius: 50%;
   box-shadow: 0 0 3px 1px white;

} /* circular menu */ .tip { 

   z-index: 1;
   /**outline: dotted 1px white;/**/
   margin: -5em;
   margin-left: -9em;
   left: 43%;
   top: 30%;
   width: 25em; height: 25em;
   transform: scale(.001);
   -ms-transform: scale(.001);
   -webkit-transform: scale(.001);
   list-style: none;
   opacity: 0;

}

/* make the menu appear on click */ .button:focus + .tip { 

   transform: scale(1);
   -ms-transform: scale(1);
   -webkit-transform: scale(1);
   opacity: 1;

} /* slices of the circular menu */ .slice { 

   overflow: hidden;
   position: absolute;
   /**outline: dotted 1px yellow;/**/
   width: 50%; height: 50%;
   transform-origin: 100% 100%;
   -ms-transform-origin: 100% 100%;
   -webkit-transform-origin: 100% 100%;

} /* 

* rotate each slice at the right angle = (A/2)° + (k - (n+1)/2)*A°
* where A is the angle of 1 slice (30° in this case)
* k is the number of the slice (in {1,2,3,4,5} here)
* and n is the number of slices (5 in this case)
* formula works for odd number of slices (n odd)
* for even number of slices (n even) the rotation angle is (k - n/2)*A°
* 
* after rotating, skew on Y by 90°-A°; here A° = the angle for 1 slice = 30° 
*/

.slice:first-child { 

   transform: rotate(-45deg) skewY(60deg);
   -ms-transform: rotate(-45deg) skewY(60deg);
   -webkit-transform: rotate(-45deg) skewY(60deg);

} .slice:nth-child(2) { 

   transform: rotate(-15deg) skewY(60deg);
   -ms-transform: rotate(-15deg) skewY(60deg);
   -webkit-transform: rotate(-15deg) skewY(60deg);

} .slice:nth-child(3) { 

   transform: rotate(15deg) skewY(60deg);
   -ms-transform: rotate(15deg) skewY(60deg);
   -webkit-transform: rotate(15deg) skewY(60deg);

} .slice:nth-child(4) { 

   transform: rotate(45deg) skewY(60deg);
   -ms-transform: rotate(45deg) skewY(60deg);
   -webkit-transform: rotate(45deg) skewY(60deg);

} .slice:last-child { 

   transform: rotate(75deg) skewY(60deg);
   -ms-transform: rotate(75deg) skewY(60deg);
   -webkit-transform: rotate(75deg) skewY(60deg);

} /* covers for the inner part of the links so there's no hover trigger between 

  star button & menu links; give them a red background to see them */

.slice:after { 

   position: absolute;
   top: 32%; left: 32%;
   width: 136%; height: 136%;
   border-radius: 50%;
   /* "unskew" = skew by minus the same angle by which parent was skewed */
   transform: skewY(-60deg);
   content: ;

} /* menu links */ .slice a { 

   width: 200%; height: 200%;
   border-radius: 50%;
   box-shadow: 0 0 3px dimgrey, inset 0 0 4px white;
   /* "unskew" & rotate by -A°/2 */
   transform: skewY(-60deg) rotate(-15deg);
   -ms-transform: skewY(-60deg) rotate(-15deg);
   -webkit-transform: skewY(-60deg) rotate(-15deg);
   background: /* lateral separators */
   linear-gradient(75deg,

transparent 50%, grey 50%, transparent 54%) no-repeat 36.5% 0, 

   linear-gradient(-75deg,

transparent 50%, grey 50%, transparent 54%) no-repeat 63.5% 0, 

   /* make sure inner part is transparent */
   radial-gradient(rgba(127,127,127,0) 49%,

rgba(255,255,255,.7) 51%, #c9c9c9 52%); 

   background-size: 15% 15%, 15% 15%, cover;
   line-height: 3;
   vertical

} /* arrow for middle link */ .slice:nth-child(3) a:after { 

   position: absolute;
   top: 13%; left: 50%;
   margin: -.25em;
   width: .5em; height: .5em;
   box-shadow: 2px 2px 2px white;
   transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   background: linear-gradient(-45deg, #c9c9c9 50%, transparent 50%);
   content: ;

}

/* Header */ /**********/

.header { 

   background-color: #834141;
   min-height: 15%;

}

.header > h2 { 

   font: 1.2em/1.5em;

}


/* Footer */ /**********/ .footer { 

   background-color: #834141;
   min-height: 15%;

}

/* Site-menu */ /*************/ .site-menu { 

   width: 15%;
   height: 100%;
   background: #333;
   color: #eee;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   margin-bottom: -5000px;
   padding-bottom: 5000px;

}

.site-menu-content { 

   height: 100%;

}

.site-menu ul { 

   margin-top: 10px;

} .site-menu ul li { 

   display: inline-block;
   width: 200px;
   list-style: none;
   font-size: 20px;
   padding: 3px 10px;

} .site-menu ul li:before { 

   content: '-';
   margin-right: 5px;
   color: rgba( 255, 255, 255, 0.2 );

}

body.index .site-menu-logo { 

   display:none;

}

.site-menu-logo { 

   width: 100%;

}

/* Team page */ /*************/

.team-cat-wrapper { 

   float:left;
   display: block;

}

.team-member { 

   background: none repeat scroll 0 0 #FFFFFF;
   border-bottom: 1px solid #DDDDDD;
   -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
   -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
   margin: 2.5%;
   cursor: pointer;

}

.team-member-img-wrap { 

   width: 90%;
   margin: 0 auto;

}

.team-member-img { 

   padding-top: 2%;
   display: block;
   width: 75%;
   margin: 0 auto;

}

.team-member-desc{ 

   width: 85%;
   margin: 0 auto;
   text-align: center;

}

.avgrund-popup { 

   width: 70%;

}

.avgrund-popup .team-member-modal-img-wrap { 

   display: block;
   float: right;

}

.avgrund-popup .team-member-modal-img { 

   width: 250px;
   margin-left: 15px;

}

/* Notebook page */ /*****************/

.log { 

   background: none repeat scroll 0 0 #FFFFFF;
   border-bottom: 1px solid #DDDDDD;
   -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
   -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
   margin: 2.5%;

}

.log-img-wrap{ 

   width: 90%;

}

.log-img{ 

   padding-top: 2%;
   display: block;
   width: 75%;

}

.log-desc { 

   padding-top: 15px;

}

.log-left { 

   width:90%;

}

.log-right{ 

   width: 90%;
   margin-left: 22.5%;

}

Retrieved from "http://2013.igem.org/Team:Concordia/CSS/Base"