Team:Concordia/CSS/Base

From 2013.igem.org

(Difference between revisions)
(base.css)
Line 1: Line 1:
/* Reset MediaWiki CSS */
/* Reset MediaWiki CSS */
 +
/**********************/
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
     display:none;}
     display:none;}
Line 8: Line 9:
     border: none;}
     border: none;}
-
/* Radial menu CSS */
 
* { margin: 0; padding: 0; }
* { margin: 0; padding: 0; }
-
body {
+
body.index {
overflow: hidden;
overflow: hidden;
-
background: url('../images/geometry.png');
 
}
}
 +
 +
.contents, body>.container {
 +
        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");
 +
background-repeat: repeat-x repeat-y;
 +
background-position: center;
 +
background-attachment: fixed;
 +
}
 +
 +
.contents.notebook {
 +
        background-image: url("../images/modeling.jpg");
 +
background-repeat: no-repeat;
 +
background-position: center;
 +
background-attachment: fixed;
 +
}
 +
 +
/* Radial menu CSS */
 +
/*******************/
/* generic styles for button & circular menu */
/* generic styles for button & circular menu */
 +
.radial-menu-container {
 +
    height: 100%;
 +
}
 +
.ctrl {
.ctrl {
position: absolute;
position: absolute;
-
top: 30%; left: 30%;
+
top: 30%; left: 40%;
font: 1.5em/1.13 Verdana, sans-serif;
font: 1.5em/1.13 Verdana, sans-serif;
transition: .5s;
transition: .5s;
Line 57: Line 84:
margin: -5em;
margin: -5em;
margin-left: -9em;
margin-left: -9em;
-
left: 37%;
+
left: 43%;
top: 30%;
top: 30%;
width: 25em; height: 25em;
width: 25em; height: 25em;
Line 188: Line 215:
background: linear-gradient(-45deg, #c9c9c9 50%, transparent 50%);
background: linear-gradient(-45deg, #c9c9c9 50%, transparent 50%);
content: '';
content: '';
 +
}
 +
 +
/* Header */
 +
/**********/
 +
 +
.header {
 +
    background-color: #834141;
 +
    min-height: 15%;
 +
}
 +
 +
.header > h2 {
 +
    font: 1.2em/1.5em;
 +
}
 +
 +
 +
/* Footer */
 +
/**********/
 +
.footer {
 +
    background-color: #834141;
 +
    min-height: 15%;
 +
}
 +
 +
/* Meny */
 +
/********/
 +
.meny {
 +
    background-color: #4A4446;
}
}

Revision as of 16:35, 12 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; }

body.index { overflow: hidden; }

.contents, body>.container {

       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");

background-repeat: repeat-x repeat-y; background-position: center; background-attachment: fixed; }

.contents.notebook {

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

background-repeat: no-repeat; background-position: center; background-attachment: fixed; }

/* 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; } /* 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; }

.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; }

/* 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 */ .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%;

}

/* Meny */ /********/ .meny {

   background-color: #4A4446;

}